Skip to content

B
bigDataSystem
Commit 66c1ed50 authored by baiyinhao's avatar baiyinhao
Browse files
Options

修改文件

parent 253d2036
Hide whitespace changes
Inline Side-by-side
Showing with 305 additions and 249 deletions
src/views/dataQuality/dataSheet/task/QualityTaskSetting.vue
View file @ 66c1ed50
...@@ -68,6 +68,7 @@ ...@@ -68,6 +68,7 @@
</PageWrapper> </PageWrapper>
<quality-Run-setting-modal @register="registerRunSetting" /> <quality-Run-setting-modal @register="registerRunSetting" />
<quality-check-range-plus-modal @register="registerCheckRangePlusModal" /> <quality-check-range-plus-modal @register="registerCheckRangePlusModal" />
<new-rule-modal @register="registerNewRule" />
</BasicModal> </BasicModal>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
...@@ -83,7 +84,7 @@ ...@@ -83,7 +84,7 @@
import { Modal } from 'ant-design-vue'; import { Modal } from 'ant-design-vue';
import { useGo } from '@/hooks/web/usePage'; import { useGo } from '@/hooks/web/usePage';
import QualityCheckRangePlusModal from '@/views/dataQuality/dataSheet/task/checkRange/index.vue'; import QualityCheckRangePlusModal from '@/views/dataQuality/dataSheet/task/checkRange/index.vue';
import NewRuleModal from '@/views/dataQuality/dataSheet/task/rule/index.vue';
import QualityRunSettingModal from '@/views/dataQuality/dataSheet/task/QualityTaskRunSetting.vue'; import QualityRunSettingModal from '@/views/dataQuality/dataSheet/task/QualityTaskRunSetting.vue';
import { BasicTable, useTable } from '@/components/Table'; import { BasicTable, useTable } from '@/components/Table';
import { PageWrapper } from '@/components/Page'; import { PageWrapper } from '@/components/Page';
...@@ -107,6 +108,7 @@ ...@@ -107,6 +108,7 @@
//准备获取表单项checkType的值 //准备获取表单项checkType的值
const checkType = ref('1'); const checkType = ref('1');
const searchInfo = reactive<Recordable>({}); const searchInfo = reactive<Recordable>({});
const [registerNewRule, { openModal: openNewRuleModal }] = useModal();
const [registerRunSetting, { openModal: openRunSettingModal }] = useModal(); const [registerRunSetting, { openModal: openRunSettingModal }] = useModal();
const [registerCheckRangePlusModal, { openModal: openCheckRangePlusModal }] = useModal(); const [registerCheckRangePlusModal, { openModal: openCheckRangePlusModal }] = useModal();
//初始化弹框 //初始化弹框
...@@ -236,9 +238,7 @@ ...@@ -236,9 +238,7 @@
} }
/** 新增质量规则*/ /** 新增质量规则*/
function handleAddQualityRule() { function handleAddQualityRule() {
router.push({ openNewRuleModal(true, {});
path: '/dataQuality/ruleAdd',
});
reload(); reload();
} }
/** 添加检查范围*/ /** 添加检查范围*/
......
src/views/dataQuality/dataSheet/task/index.vue
View file @ 66c1ed50
...@@ -182,6 +182,7 @@ ...@@ -182,6 +182,7 @@
import NewRuleModal from './QualityTaskNewRule.vue'; import NewRuleModal from './QualityTaskNewRule.vue';
import AlarmSettingModal from './QualityTaskAlarmSetting.vue'; import AlarmSettingModal from './QualityTaskAlarmSetting.vue';
import QualityCheckRangePlusModal from '@/views/dataQuality/dataSheet/task/checkRange/index.vue'; import QualityCheckRangePlusModal from '@/views/dataQuality/dataSheet/task/checkRange/index.vue';
// src\views\dataQuality\dataSheet\task\rule\index.vue
import { Modal } from 'ant-design-vue'; import { Modal } from 'ant-design-vue';
import { import {
storageManagementData, storageManagementData,
......
src/views/dataQuality/dataSheet/task/rule/index.vue
View file @ 66c1ed50
<template> <template>
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex"> <BasicModal
<div class="w-1/4 xl:w-1/5" style="padding: 0 0 0 16px"> width="60%"
<Tabs default-active-key="1"> v-bind="$attrs"
<Tabs.TabPane key="1" tab="数据库"> @register="registerModal"
<BasicTree :treeData="treeData" :checkable="true" defaultExpandLevel="1" /> :title="getTitle"
</Tabs.TabPane> @ok="handleSubmit"
<Tabs.TabPane key="2" tab="规则组"> >
<BasicTree <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
:treeData="treeData1" <div class="w-1/4 xl:w-1/5" style="padding: 0 0 0 16px">
:checkable="true" <Tabs default-active-key="1">
:actionList="actionList" <Tabs.TabPane key="1" tab="数据库">
defaultExpandLevel="1" <BasicTree :treeData="treeData" :checkable="true" defaultExpandLevel="1" />
/> </Tabs.TabPane>
</Tabs.TabPane> <Tabs.TabPane key="2" tab="规则组">
<Tabs.TabPane key="3" tab="质量主体"> <BasicTree
<BasicTree :treeData="treeData2" :checkable="true" defaultExpandLevel="1" /> :treeData="treeData1"
</Tabs.TabPane> :checkable="true"
</Tabs> :actionList="actionList"
</div> defaultExpandLevel="1"
<container class="table-container w-3/4 xl:w-4/5"> />
<BasicTable @register="registerTable" :searchInfo="searchInfo" slots="header"> </Tabs.TabPane>
<template #header> <Tabs.TabPane key="3" tab="质量主体">
<div style="display: flex; justify-content: space-between"> <BasicTree :treeData="treeData2" :checkable="true" defaultExpandLevel="1" />
<div class="title"> </Tabs.TabPane>
<div class="title_left"> </Tabs>
<div> </div>
<Icon icon="dashicons:admin-plugins" :size="32" :color="'#7360E2'" /> <container class="table-container w-3/4 xl:w-4/5">
</div> <BasicTable @register="registerTable" :searchInfo="searchInfo" slots="header">
<div style="padding-left: 10px"> <template #header>
<div class="name">供电单位用电量</div> <div style="display: flex; justify-content: space-between">
<div style="color: darkgray">API监控/市场营销</div> <div class="title">
<div class="title_left">
<div>
<Icon icon="dashicons:admin-plugins" :size="32" :color="'#7360E2'" />
</div>
<div style="padding-left: 10px">
<div class="name">供电单位用电量</div>
<div style="color: darkgray">API监控/市场营销</div>
</div>
</div> </div>
</div> </div>
<a-button type="primary">调用日志</a-button>
</div> </div>
<a-button type="primary">调用日志</a-button> </template>
</div> <template #toolbar> </template>
</template> <template #bodyCell="{ column, record }">
<template #toolbar> </template> <template v-if="column.key === 'action'"> </template>
<template #bodyCell="{ column, record }"> </template>
<template v-if="column.key === 'action'"> </template> </BasicTable>
</template> </container>
</BasicTable>
</container>
<RuleEditModel :is-add="isAdd" @register="ruleEditModal" @success="REModalSuccess" /> <RuleEditModel :is-add="isAdd" @register="ruleEditModal" @success="REModalSuccess" />
<RuleMoreUpdate @register="ruleMoreUpdateModel" /> <RuleMoreUpdate @register="ruleMoreUpdateModel" />
<importModal @register="registerImport" @success="handleImportSuccess" /> <importModal @register="registerImport" @success="handleImportSuccess" />
<RuleGroupAddModel @register="ruleGroupAddModel" /> <RuleGroupAddModel @register="ruleGroupAddModel" />
<RuleGroupEditModel @register="ruleGroupEditModel" /> <RuleGroupEditModel @register="ruleGroupEditModel" />
<MoveInGroupModel @register="moveInGroupModel" /> <MoveInGroupModel @register="moveInGroupModel" />
<VersionManage @register="versionManage" /> <VersionManage @register="versionManage" />
</PageWrapper> </PageWrapper>
</BasicModal>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { BasicTable, useTable, TableAction } from '@/components/Table'; import { BasicTable, useTable, TableAction } from '@/components/Table';
import { BasicModal, useModal, useModalInner } from '@/components/Modal';
import { PageWrapper } from '@/components/Page'; import { PageWrapper } from '@/components/Page';
import { BasicTree, TreeActionItem } from '@/components/Tree'; import { BasicTree, TreeActionItem } from '@/components/Tree';
import { ruleFormSchema, ruleTable } from '@/views/dataQuality/dataSheet/task/rule/rule.data'; import { ruleFormSchema, ruleTable } from '@/views/dataQuality/dataSheet/task/rule/rule.data';
...@@ -65,7 +74,6 @@ ...@@ -65,7 +74,6 @@
import RuleGroupEditModel from './ruleGroupEditModel.vue'; import RuleGroupEditModel from './ruleGroupEditModel.vue';
import MoveInGroupModel from './moveInGroupModel.vue'; import MoveInGroupModel from './moveInGroupModel.vue';
import VersionManage from './versionManage.vue'; import VersionManage from './versionManage.vue';
import { useModal } from '@/components/Modal';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { useMessage } from '@/hooks/web/useMessage'; import { useMessage } from '@/hooks/web/useMessage';
import { h, ref } from 'vue'; import { h, ref } from 'vue';
...@@ -83,6 +91,10 @@ ...@@ -83,6 +91,10 @@
const [ruleGroupEditModel, { openModal: openRuleGroupEditModel }] = useModal(); const [ruleGroupEditModel, { openModal: openRuleGroupEditModel }] = useModal();
const [moveInGroupModel, { openModal: openMoveInGroupModel }] = useModal(); const [moveInGroupModel, { openModal: openMoveInGroupModel }] = useModal();
const [versionManage, { openModal: openVersionManage }] = useModal(); const [versionManage, { openModal: openVersionManage }] = useModal();
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
setModalProps({ confirmLoading: false });
});
const actionList: TreeActionItem[] = [ const actionList: TreeActionItem[] = [
{ {
render: (node) => { render: (node) => {
......
src/views/taskScheduling/schedulingExecution/executorManagement/index.vue
View file @ 66c1ed50
<template> <template>
<PageWrapper contentBackground dense contentClass="flex"> <PageWrapper contentBackground dense contentClass="flex">
<template #headerContent> <template #headerContent>
<div style="border-bottom: 2px solid #EBEFF6;"> <div style="border-bottom: 2px solid #ebeff6">
<p style="margin: -20px 0 10px 0;color: #DCDCDC; ">调度/执行器管理/</p> <div style="display: flex; align-items: center; margin-bottom: 10px">
<div style="display: flex;align-items: center;margin-bottom:10px;">
<div> <div>
<Icon icon="ant-design:apartment-outlined" :size="25" style="color:#5689E5;"/> <Icon icon="ant-design:apartment-outlined" :size="25" style="color: #5689e5" />
</div> </div>
<span style="font-size: 20px">执行器编辑器</span> <span style="font-size: 20px">执行器编辑器</span>
</div> </div>
<p style="margin-top: 10px; margin-bottom: 10px; margin-left: 30px; color: #dcdcdc"
>调度/执行器管理/</p
>
<div type="primary" class="save-button" @click="resourceReplacement"> <div type="primary" class="save-button" @click="resourceReplacement">
<a-button type="text" style="color: #169aff;border-color:#169aff;">执行器资源替换 <a-button type="text" style="border-color: #169aff; color: #169aff"
>执行器资源替换
</a-button> </a-button>
</div> </div>
<div type="primary" class="save-button1" @click="downloadAndInstallPackage"> <div type="primary" class="save-button1" @click="downloadAndInstallPackage">
<a-button type="text" style="color: #169aff;border-color:#169aff;">下载执行器rpm安装包 <a-button type="text" style="border-color: #169aff; color: #169aff"
>下载执行器rpm安装包
</a-button> </a-button>
</div> </div>
</div> </div>
</template> </template>
<div style="display:flex;"> <div style="display: flex">
<div style="width: 20%;border-right: 2px solid #EBEFF6;"> <div style="width: 20%; border-right: 2px solid #ebeff6">
<div> <div>
<BasicTable @register="registerGroupTable" :searchInfo="searchInfo"> <BasicTable @register="registerGroupTable" :searchInfo="searchInfo">
<template #tableTitle> <template #tableTitle>
<div style="display: flex;align-items: center"> <div style="display: flex; align-items: center">
<div class="container "> <div class="container">
<span class="executor-text">组别</span> <span class="executor-text">组别</span>
</div> </div>
</div> </div>
</template> </template>
<template #toolbar> <template #toolbar>
<Icon icon="ant-design:plus-outlined" <Icon icon="ant-design:plus-outlined" :size="20" @click="addGroup" />
:size="20" @click="Delete"/> <Icon icon="ant-design:delete-outlined" :size="20" @click="Delete" />
<Icon icon="ant-design:delete-outlined"
:size="20" @click="Delete"/>
</template> </template>
</BasicTable> </BasicTable>
</div> </div>
<div> <div>
<BasicTable @register="registerPathTable" :searchInfo="searchInfo"> <BasicTable @register="registerPathTable" :searchInfo="searchInfo">
<template #tableTitle> <template #tableTitle>
<div style="display: flex;align-items: center"> <div style="display: flex; align-items: center">
<div class="container1"> <div class="container1">
<span class="executor-text">运行环境路径</span> <span class="executor-text">运行环境路径</span>
</div> </div>
</div> </div>
</template> </template>
<template #toolbar> <template #toolbar>
<Icon icon="ant-design:plus-outlined" <Icon icon="ant-design:plus-outlined" :size="20" @click="addEnvironmentPath" />
:size="20" @click="Delete"/> <Icon icon="ant-design:delete-outlined" :size="20" @click="Delete" />
<Icon icon="ant-design:delete-outlined"
:size="20" @click="Delete"/>
</template> </template>
</BasicTable> </BasicTable>
</div> </div>
...@@ -61,54 +59,61 @@ ...@@ -61,54 +59,61 @@
<div style="width: 80%"> <div style="width: 80%">
<BasicTable @register="registerTable" :searchInfo="searchInfo"> <BasicTable @register="registerTable" :searchInfo="searchInfo">
<template #tableTitle> <template #tableTitle>
<div style="display: flex;align-items: center"> <div style="display: flex; align-items: center">
<div class="container "> <div class="container">
<span class="executor-text">执行器</span> <span class="executor-text">执行器</span>
</div> </div>
<BasicForm @register="registerForm" style="margin-bottom: -20px"/> <BasicForm @register="registerForm" style="margin-bottom: -20px" />
</div> </div>
</template> </template>
<template #toolbar> <template #toolbar>
<a-button :disabled="getRowSelection().selectedRowKeys <=0" <a-button
type="primary" @click="addEnvironmentPath"> :disabled="getRowSelection().selectedRowKeys <= 0"
<Icon icon="ant-design:plus-outlined" :size="15"/> type="primary"
@click="addEnvironmentPath"
>
添加运行环境路径 添加运行环境路径
</a-button> </a-button>
<a-button :disabled="getRowSelection().selectedRowKeys <=0" <a-button
type="primary" @click="addGroup">添加到组别 :disabled="getRowSelection().selectedRowKeys <= 0"
type="primary"
@click="addGroup"
>添加到组别
</a-button> </a-button>
<a-button :disabled="getRowSelection().selectedRowKeys <=0" <a-button
type="primary" @click="Delete"> :disabled="getRowSelection().selectedRowKeys <= 0"
<Icon icon="ant-design:delete-outlined"></Icon> type="primary"
@click="Delete"
>删除
</a-button> </a-button>
</template> </template>
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'"> <template v-if="column.key === 'action'">
<TableAction <TableAction
:actions="[ :actions="[
{ {
label: '添加到组别', label: '添加到组别',
onClick: addGroup.bind(null, record), onClick: addGroup.bind(null, record),
}, },
{ {
icon:'ant-design:delete-outlined', icon: 'ant-design:delete-outlined',
/*label: '删除',*/ /*label: '删除',*/
type:'text', type: 'text',
onClick: Delete.bind(null, record), onClick: Delete.bind(null, record),
}, },
]" ]"
/> />
</template> </template>
</template> </template>
<template #flag="{ text }"> <template #flag="{ text }">
<span v-if="text === '正常'"> <span v-if="text === '正常'">
<Icon icon="ant-design:check-circle-filled" :size="15" style="color:#82BD9D;"/> <Icon icon="ant-design:check-circle-filled" :size="15" style="color: #82bd9d" />
正常 正常
</span> </span>
<span v-else-if="text === '不正常'"> <span v-else-if="text === '不正常'">
<Icon icon="ant-design:close-circle-filled" :size="15" style="color:#C02C20;"/> <Icon icon="ant-design:close-circle-filled" :size="15" style="color: #c02c20" />
不正常 不正常
</span> </span>
</template> </template>
</BasicTable> </BasicTable>
</div> </div>
...@@ -116,41 +121,40 @@ ...@@ -116,41 +121,40 @@
</PageWrapper> </PageWrapper>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import {PageWrapper} from "@/components/Page"; import { PageWrapper } from '@/components/Page';
import Icon from "@/components/Icon/Icon.vue"; import Icon from '@/components/Icon/Icon.vue';
import {groupTable, pathTable, tableList} from './mock'; import { groupTable, pathTable, tableList } from './mock';
import {columns, groupSchema, pathSchema, searchFormSchema} from './executorManagement.data'; import { columns, groupSchema, pathSchema, searchFormSchema } from './executorManagement.data';
import {BasicTable, useTable, TableAction} from '@/components/Table'; import { BasicTable, useTable, TableAction } from '@/components/Table';
import {reactive} from "vue"; import { reactive } from 'vue';
import {Divider} from "ant-design-vue"; import { Divider, Modal } from 'ant-design-vue';
import BasicForm from "@/components/Form/src/BasicForm.vue"; import BasicForm from '@/components/Form/src/BasicForm.vue';
import { useMessage } from '@/hooks/web/useMessage';
const searchInfo = reactive<Recordable>({}); const { createMessage } = useMessage();
const [registerTable, { const searchInfo = reactive<Recordable>({});
reload, const [
updateTableDataRecord, registerTable,
getSearchInfo, { reload, updateTableDataRecord, getSearchInfo, getForm, getRowSelection },
getForm, ] = useTable({
getRowSelection /* title: '执行器',*/
}] = useTable({ api: async (params) => {
/* title: '执行器',*/ const response = {
api: async (params) => { pageNu: '1',
const response = { pageSize: '10',
pageNu: "1", pages: '1',
pageSize: "10", total: tableList.length,
pages: "1", code: '',
total: tableList.length, message: '',
code: '', data: tableList,
message: '', };
data: tableList, return { ...response };
}; },
return {...response}; rowKey: 'businessId',
}, rowSelection: true,
rowKey: 'businessId', showIndexColumn: false,
rowSelection: true, columns,
showIndexColumn: false, /* formConfig: {
columns,
/* formConfig: {
schemas: searchFormSchema, schemas: searchFormSchema,
//在 input 中输入时按回车自动提交 //在 input 中输入时按回车自动提交
autoSubmitOnEnter: true, autoSubmitOnEnter: true,
...@@ -162,125 +166,164 @@ const [registerTable, { ...@@ -162,125 +166,164 @@ const [registerTable, {
} }
}, },
useSearchForm: true,*/ useSearchForm: true,*/
showTableSetting: false, showTableSetting: false,
bordered: true, bordered: true,
handleSearchInfoFn(info) { handleSearchInfoFn(info) {
console.log('handleSearchInfoFn', info); console.log('handleSearchInfoFn', info);
return info; return info;
}, },
actionColumn: { actionColumn: {
width: 180, width: 180,
title: '操作', title: '操作',
dataIndex: 'action', dataIndex: 'action',
// slots: { customRender: 'action' }, // slots: { customRender: 'action' },
}, },
}); });
/**右上*/ /**右上*/
const [registerForm] = useTable({ const [registerForm] = useTable({
schemas: searchFormSchema, schemas: searchFormSchema,
//在 input 中输入时按回车自动提交 //在 input 中输入时按回车自动提交
autoSubmitOnEnter: true, autoSubmitOnEnter: true,
//是否显示操作按钮(重置/提交) //是否显示操作按钮(重置/提交)
showActionButtonGroup: false, showActionButtonGroup: false,
rowSelection: true, rowSelection: true,
pagination: false, pagination: false,
showIndexColumn: false, showIndexColumn: false,
scroll: {y: 300}, scroll: { y: 300 },
showSummary: true, showSummary: true,
}); });
/**左上*/ /**左上*/
const [registerGroupTable, {}] = useTable({ const [registerGroupTable, {}] = useTable({
rowKey: 'pathId', rowKey: 'pathId',
title: '组别', title: '组别',
dataSource: groupTable, dataSource: groupTable,
columns: groupSchema, columns: groupSchema,
rowSelection: true, rowSelection: true,
pagination: false, pagination: false,
showIndexColumn: false, showIndexColumn: false,
scroll: {y: 300}, scroll: { y: 300 },
showSummary: true, showSummary: true,
}); });
/**左下*/ /**左下*/
const [registerPathTable] = useTable({ const [registerPathTable] = useTable({
title: '运行环境路径', title: '运行环境路径',
rowKey: 'groupId', rowKey: 'groupId',
dataSource: pathTable, dataSource: pathTable,
columns: pathSchema, columns: pathSchema,
rowSelection: true, rowSelection: true,
pagination: false, pagination: false,
showIndexColumn: false, showIndexColumn: false,
scroll: {y: 300}, scroll: { y: 300 },
showSummary: true, showSummary: true,
}); });
/**执行器资源替换*/
function resourceReplacement() {
}
/**搜索*/
function search() {
}
/**下载执行器rpm安装包*/
function downloadAndInstallPackage() {
}
/**添加运行环境路径*/
function addEnvironmentPath() {
}
/**添加到组别*/ /**执行器资源替换*/
function addGroup() { function resourceReplacement() {}
/**搜索*/
function search() {}
/**下载执行器rpm安装包*/
function downloadAndInstallPackage() {}
} /**添加运行环境路径*/
function addEnvironmentPath() {
Modal.confirm({
title: '确认添加',
content: '是否将选中执行器添加到运行环境路径?',
onOk: () => {
// const rowSelection = getRowSelection().selectedRowKeys;
// for (let i = 0; i < rowSelection.length; i++) {
// tableList.value.splice(
// tableList.value.findIndex((item) => item.businessId === rowSelection[i]),
// 1,
// );
// }
createMessage.success('添加成功!');
// rowSelection.length = 0;
reload();
},
});
}
/**删除Delete*/ /**添加到组别*/
function Delete() { function addGroup() {
console.log('打印加号按钮') Modal.confirm({
} title: '确认添加',
content: '是否添加执行器?',
onOk: () => {
// const rowSelection = getRowSelection().selectedRowKeys;
// for (let i = 0; i < rowSelection.length; i++) {
// tableList.value.splice(
// tableList.value.findIndex((item) => item.businessId === rowSelection[i]),
// 1,
// );
// }
createMessage.success('添加成功!');
// rowSelection.length = 0;
reload();
},
});
}
/**删除Delete*/
function Delete() {
Modal.confirm({
title: '确认删除',
content: '是否删除选中的执行器?',
onOk: () => {
// const rowSelection = getRowSelection().selectedRowKeys;
// for (let i = 0; i < rowSelection.length; i++) {
// tableList.value.splice(
// tableList.value.findIndex((item) => item.businessId === rowSelection[i]),
// 1,
// );
// }
createMessage.success('删除成功!');
// rowSelection.length = 0;
reload();
},
});
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.save-button { .save-button {
position: absolute; /* 绝对定位 */ position: absolute; /* 绝对定位 */
top: 15px; top: 15px;
right: 10px; right: 10px;
margin: 25px 200px 10px 10px; margin: 25px 200px 10px 10px;
} }
.save-button1 {
position: absolute;
top: 15px;
right: 10px;
margin: 25px 10px 10px;
}
.save-button1 { .container {
position: absolute; display: flex;
top: 15px; align-items: center; /* 让内容垂直居中 */
right: 10px; justify-content: center;
margin: 25px 10px 10px 10px; width: 70px;
} }
.container1 {
display: flex;
align-items: center; /* 让内容垂直居中 */
justify-content: center;
width: 120px;
}
.container { .executor-text {
width: 70px; display: inline-flex; /* 保持内联样式 */
display: flex; align-items: center; /* 确保文本垂直居中 */
justify-content: center; }
align-items: center; /* 让内容垂直居中 */
}
.container1 {
width: 120px;
display: flex;
justify-content: center;
align-items: center; /* 让内容垂直居中 */
}
.executor-text {
display: inline-flex; /* 保持内联样式 */
align-items: center; /* 确保文本垂直居中 */
}
.executor-text::before { .executor-text::before {
content: ''; /* 伪元素的内容为空 */ content: ''; /* 伪元素的内容为空 */
display: inline-block; display: inline-block;
width: 4px; /* 伪元素的宽度 */ width: 4px; /* 伪元素的宽度 */
height: 20px; /* 伪元素的高度 */ height: 20px; /* 伪元素的高度 */
background-color:#5689E5; /* 蓝色 */ margin-right: 5px; /* 与文字的间距 */
margin-right: 5px; /* 与文字的间距 */ background-color: #5689e5; /* 蓝色 */
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment