From f5711e4fcd744cdab8aefcf8f08a4a951481b83b Mon Sep 17 00:00:00 2001 From: Amy0104 <97265214+Amy0104@users.noreply.github.com> Date: Thu, 10 Mar 2022 18:48:40 +0800 Subject: [PATCH] [Feature][UI Next][V1.0.0-Alpha] Unify clickable text in tables. (#8813) --- .../button-link}/index.module.scss | 6 +- .../src/components/button-link/index.tsx | 51 ++++++++++++ .../src/components/modal/index.tsx | 9 ++- .../src/service/service.ts | 2 +- dolphinscheduler-ui-next/src/utils/log.ts | 27 +++++-- .../src/views/datasource/list/use-columns.ts | 14 +--- .../src/views/projects/list/use-table.ts | 9 +-- .../task/definition/index.module.scss | 10 --- .../projects/task/definition/use-table.ts | 15 +--- .../workflow/definition/index.module.scss | 8 -- .../projects/workflow/definition/use-table.ts | 62 +++++++------- .../workflow/instance/index.module.scss | 8 -- .../projects/workflow/instance/use-table.ts | 81 +++++++++---------- .../views/resource/file/table/use-table.ts | 14 +--- .../resource/udf/resource/index.module.scss | 8 -- .../views/resource/udf/resource/use-table.ts | 37 ++++----- .../src/sass/common/_table.scss | 81 +++++++++---------- 17 files changed, 209 insertions(+), 233 deletions(-) rename dolphinscheduler-ui-next/src/{views/resource/file/table => components/button-link}/index.module.scss (92%) create mode 100644 dolphinscheduler-ui-next/src/components/button-link/index.tsx diff --git a/dolphinscheduler-ui-next/src/views/resource/file/table/index.module.scss b/dolphinscheduler-ui-next/src/components/button-link/index.module.scss similarity index 92% rename from dolphinscheduler-ui-next/src/views/resource/file/table/index.module.scss rename to dolphinscheduler-ui-next/src/components/button-link/index.module.scss index 488e8c094e..9f5dfe307f 100644 --- a/dolphinscheduler-ui-next/src/views/resource/file/table/index.module.scss +++ b/dolphinscheduler-ui-next/src/components/button-link/index.module.scss @@ -14,10 +14,10 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +.button-link { + cursor: pointer; + color: var(--n-color-target); -.links { - color: #2080f0; - text-decoration: none; &:hover { text-decoration: underline; } diff --git a/dolphinscheduler-ui-next/src/components/button-link/index.tsx b/dolphinscheduler-ui-next/src/components/button-link/index.tsx new file mode 100644 index 0000000000..96f1affbc2 --- /dev/null +++ b/dolphinscheduler-ui-next/src/components/button-link/index.tsx @@ -0,0 +1,51 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { defineComponent, PropType, renderSlot } from 'vue' +import { NButton } from 'naive-ui' +import styles from './index.module.scss' + +const props = { + disabled: { + type: Boolean, + default: false + }, + iconPlacement: { + type: String as PropType<'left' | 'right'>, + default: 'left' + } +} + +const ButtonLink = defineComponent({ + name: 'button-link', + props, + emits: ['click'], + setup(props, { slots, emit }) { + const onClick = (ev: MouseEvent) => { + emit('click', ev) + } + return () => ( + + {{ + default: renderSlot(slots, 'default'), + icon: renderSlot(slots, 'icon') + }} + + ) + } +}) + +export default ButtonLink diff --git a/dolphinscheduler-ui-next/src/components/modal/index.tsx b/dolphinscheduler-ui-next/src/components/modal/index.tsx index 9ad83f24a4..9666a82f29 100644 --- a/dolphinscheduler-ui-next/src/components/modal/index.tsx +++ b/dolphinscheduler-ui-next/src/components/modal/index.tsx @@ -15,8 +15,9 @@ * limitations under the License. */ -import { defineComponent, h, PropType, renderSlot, Ref } from 'vue' -import { NModal, NCard, NButton, NSpace, NIcon } from 'naive-ui' +import { defineComponent, PropType, renderSlot, Ref } from 'vue' +import { NModal, NCard, NButton, NSpace } from 'naive-ui' +import ButtonLink from '@/components/button-link' import { useI18n } from 'vue-i18n' import styles from './index.module.scss' import { LinkOption } from '@/components/modal/types' @@ -108,12 +109,12 @@ const Modal = defineComponent({ .filter((item: any) => item.show) .map((item: any) => { return ( - + {{ default: () => item.text, icon: () => item.icon() }} - + ) })} diff --git a/dolphinscheduler-ui-next/src/service/service.ts b/dolphinscheduler-ui-next/src/service/service.ts index 58d3a5b169..c22d51ffa5 100644 --- a/dolphinscheduler-ui-next/src/service/service.ts +++ b/dolphinscheduler-ui-next/src/service/service.ts @@ -29,7 +29,7 @@ const userStore = useUserStore() * @description Log and display errors * @param {Error} error Error object */ - const handleError = (res: AxiosResponse) => { +const handleError = (res: AxiosResponse) => { // Print to console if (import.meta.env.MODE === 'development') { utils.log.capsule('DolphinScheduler', 'UI-NEXT') diff --git a/dolphinscheduler-ui-next/src/utils/log.ts b/dolphinscheduler-ui-next/src/utils/log.ts index cb7cc95412..6434e5101f 100644 --- a/dolphinscheduler-ui-next/src/utils/log.ts +++ b/dolphinscheduler-ui-next/src/utils/log.ts @@ -27,11 +27,20 @@ const log = { const typeColor = (type = 'primary') => { let color = '' switch (type) { - case 'primary': color = '#1890ff'; break - case 'success': color = '#52c41a'; break - case 'warning': color = '#faad14'; break - case 'error': color = '#ff4d4f'; break - default:; break + case 'primary': + color = '#1890ff' + break + case 'success': + color = '#52c41a' + break + case 'warning': + color = '#faad14' + break + case 'error': + color = '#ff4d4f' + break + default: + break } return color } @@ -42,11 +51,13 @@ const typeColor = (type = 'primary') => { * @param {String} text info text * @param {String} type style */ - log.capsule = (title: string, text: string, type: string = 'primary') => { +log.capsule = (title: string, text: string, type: string = 'primary') => { console.log( `%c ${title} %c ${text} %c`, 'background:#35495E; padding: 2px ; border-radius: 3px 0 0 3px; color: #fff;', - `background:${typeColor(type)}; padding: 2px; border-radius: 0 3px 3px 0; color: #fff;`, + `background:${typeColor( + type + )}; padding: 2px; border-radius: 0 3px 3px 0; color: #fff;`, 'background:transparent' ) } @@ -61,4 +72,4 @@ log.error = function (info) { console.groupEnd() } -export default log \ No newline at end of file +export default log diff --git a/dolphinscheduler-ui-next/src/views/datasource/list/use-columns.ts b/dolphinscheduler-ui-next/src/views/datasource/list/use-columns.ts index 5a0f556d1c..976c723618 100644 --- a/dolphinscheduler-ui-next/src/views/datasource/list/use-columns.ts +++ b/dolphinscheduler-ui-next/src/views/datasource/list/use-columns.ts @@ -20,6 +20,7 @@ import { useI18n } from 'vue-i18n' import { NPopover, NButton, NIcon, NPopconfirm, NSpace } from 'naive-ui' import { EditOutlined, DeleteOutlined } from '@vicons/antd' import JsonHighlight from './json-highlight' +import ButtonLink from '@/components/button-link' import { TableColumns } from './types' export function useColumns(onCallback: Function) { @@ -52,16 +53,9 @@ export function useColumns(onCallback: Function) { { trigger: 'click' }, { trigger: () => - h( - NButton, - { - quaternary: true, - type: 'primary' - }, - { - default: () => t('datasource.click_to_view') - } - ), + h(ButtonLink, null, { + default: () => t('datasource.click_to_view') + }), default: () => h(JsonHighlight, { rowData }) } ) diff --git a/dolphinscheduler-ui-next/src/views/projects/list/use-table.ts b/dolphinscheduler-ui-next/src/views/projects/list/use-table.ts index d414a139ae..e68552f142 100644 --- a/dolphinscheduler-ui-next/src/views/projects/list/use-table.ts +++ b/dolphinscheduler-ui-next/src/views/projects/list/use-table.ts @@ -18,6 +18,7 @@ import { h, reactive, ref } from 'vue' import { useI18n } from 'vue-i18n' import { useAsyncState } from '@vueuse/core' +import ButtonLink from '@/components/button-link' import { queryProjectListPaging } from '@/service/modules/projects' import { parseTime } from '@/utils/common' import { deleteProject } from '@/service/modules/projects' @@ -77,18 +78,14 @@ export function useTable() { { default: () => h( - 'a', + ButtonLink, { onClick: () => { menuStore.setProjectCode(row.code) router.push({ path: `/projects/${row.code}` }) } }, - { - default: () => { - return row.name - } - } + { default: () => row.name } ), tooltip: () => row.name } diff --git a/dolphinscheduler-ui-next/src/views/projects/task/definition/index.module.scss b/dolphinscheduler-ui-next/src/views/projects/task/definition/index.module.scss index 914df25778..756290d163 100644 --- a/dolphinscheduler-ui-next/src/views/projects/task/definition/index.module.scss +++ b/dolphinscheduler-ui-next/src/views/projects/task/definition/index.module.scss @@ -42,13 +42,3 @@ justify-content: center; } } - -.links { - color: dodgerblue; - text-decoration: none; - cursor: pointer; - - &:hover { - text-decoration: underline; - } -} diff --git a/dolphinscheduler-ui-next/src/views/projects/task/definition/use-table.ts b/dolphinscheduler-ui-next/src/views/projects/task/definition/use-table.ts index bebaa4a712..bda289709a 100644 --- a/dolphinscheduler-ui-next/src/views/projects/task/definition/use-table.ts +++ b/dolphinscheduler-ui-next/src/views/projects/task/definition/use-table.ts @@ -18,6 +18,7 @@ import { useAsyncState } from '@vueuse/core' import { reactive, h, ref } from 'vue' import { NButton, NIcon, NPopconfirm, NSpace, NTag, NTooltip } from 'naive-ui' +import ButtonLink from '@/components/button-link' import { useI18n } from 'vue-i18n' import { DeleteOutlined, @@ -30,7 +31,6 @@ import { deleteTaskDefinition } from '@/service/modules/task-definition' import { useRoute } from 'vue-router' -import styles from './index.module.scss' import type { TaskDefinitionItem, TaskDefinitionRes @@ -55,18 +55,11 @@ export function useTable(onEdit: Function) { width: 400, render: (row: IRecord) => h( - 'a', + ButtonLink, { - class: styles.links, - onClick: () => { - onEdit(row, true) - } + onClick: () => void onEdit(row, true) }, - { - default: () => { - return row.taskName - } - } + { default: () => row.taskName } ) }, { diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/index.module.scss b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/index.module.scss index cfaee429a2..7eac171996 100644 --- a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/index.module.scss +++ b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/index.module.scss @@ -86,11 +86,3 @@ width: 86%; } } - -.links { - color: #2080f0; - text-decoration: none; - &:hover { - text-decoration: underline; - } -} diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/use-table.ts b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/use-table.ts index 547381b3a9..65734c1f57 100644 --- a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/use-table.ts +++ b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/use-table.ts @@ -29,10 +29,10 @@ import { release } from '@/service/modules/process-definition' import TableAction from './components/table-action' - import { IDefinitionParam } from './types' import styles from './index.module.scss' import { NEllipsis, NTag } from 'naive-ui' +import ButtonLink from '@/components/button-link' export function useTable() { const { t } = useI18n() @@ -72,17 +72,15 @@ export function useTable() { { default: () => h( - 'a', + ButtonLink, { - href: 'javascript:', - class: styles.links, onClick: () => - router.push({ + void router.push({ name: 'workflow-definition-detail', params: { code: row.code } }) }, - row.name + { default: () => row.name } ), tooltip: () => row.name } @@ -191,15 +189,14 @@ export function useTable() { } const deleteWorkflow = (row: any) => { - deleteByCode(variables.projectCode, row.code) - .then(() => { - window.$message.success(t('project.workflow.success')) - getTableData({ - pageSize: variables.pageSize, - pageNo: variables.page, - searchVal: variables.searchVal - }) + deleteByCode(variables.projectCode, row.code).then(() => { + window.$message.success(t('project.workflow.success')) + getTableData({ + pageSize: variables.pageSize, + pageNo: variables.page, + searchVal: variables.searchVal }) + }) } const releaseWorkflow = (row: any) => { @@ -209,15 +206,14 @@ export function useTable() { | 'OFFLINE' | 'ONLINE' } - release(data, variables.projectCode, row.code) - .then(() => { - window.$message.success(t('project.workflow.success')) - getTableData({ - pageSize: variables.pageSize, - pageNo: variables.page, - searchVal: variables.searchVal - }) + release(data, variables.projectCode, row.code).then(() => { + window.$message.success(t('project.workflow.success')) + getTableData({ + pageSize: variables.pageSize, + pageNo: variables.page, + searchVal: variables.searchVal }) + }) } const copyWorkflow = (row: any) => { @@ -225,15 +221,14 @@ export function useTable() { codes: String(row.code), targetProjectCode: variables.projectCode } - batchCopyByCodes(data, variables.projectCode) - .then(() => { - window.$message.success(t('project.workflow.success')) - getTableData({ - pageSize: variables.pageSize, - pageNo: variables.page, - searchVal: variables.searchVal - }) + batchCopyByCodes(data, variables.projectCode).then(() => { + window.$message.success(t('project.workflow.success')) + getTableData({ + pageSize: variables.pageSize, + pageNo: variables.page, + searchVal: variables.searchVal }) + }) } const downloadBlob = (data: any, fileNameS = 'json') => { @@ -267,10 +262,9 @@ export function useTable() { const data = { codes: String(row.code) } - batchExportByCodes(data, variables.projectCode) - .then((res: any) => { - downloadBlob(res, fileName) - }) + batchExportByCodes(data, variables.projectCode).then((res: any) => { + downloadBlob(res, fileName) + }) } const gotoTimingManage = (row: any) => { diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/instance/index.module.scss b/dolphinscheduler-ui-next/src/views/projects/workflow/instance/index.module.scss index cfaee429a2..7eac171996 100644 --- a/dolphinscheduler-ui-next/src/views/projects/workflow/instance/index.module.scss +++ b/dolphinscheduler-ui-next/src/views/projects/workflow/instance/index.module.scss @@ -86,11 +86,3 @@ width: 86%; } } - -.links { - color: #2080f0; - text-decoration: none; - &:hover { - text-decoration: underline; - } -} diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/instance/use-table.ts b/dolphinscheduler-ui-next/src/views/projects/workflow/instance/use-table.ts index cd6616abd3..cf6e6e349b 100644 --- a/dolphinscheduler-ui-next/src/views/projects/workflow/instance/use-table.ts +++ b/dolphinscheduler-ui-next/src/views/projects/workflow/instance/use-table.ts @@ -22,6 +22,7 @@ import { useI18n } from 'vue-i18n' import { useRouter } from 'vue-router' import type { Router } from 'vue-router' import { NTooltip, NIcon, NSpin } from 'naive-ui' +import ButtonLink from '@/components/button-link' import { RowKey } from 'naive-ui/lib/data-table/src/interface' import { queryProcessInstanceListPaging, @@ -74,24 +75,18 @@ export function useTable() { title: t('project.workflow.workflow_name'), key: 'name', width: 200, - render: (_row: IWorkflowInstance) => + render: (row: IWorkflowInstance) => h( - 'a', + ButtonLink, { - href: 'javascript:', - class: styles.links, onClick: () => - router.push({ + void router.push({ name: 'workflow-instance-detail', - params: { id: _row.id }, - query: { code: _row.processDefinitionCode } + params: { id: row.id }, + query: { code: row.processDefinitionCode } }) }, - { - default: () => { - return _row.name - } - } + { default: () => row.name } ) }, { @@ -276,15 +271,14 @@ export function useTable() { } const deleteInstance = (id: number) => { - deleteProcessInstanceById(id, variables.projectCode) - .then(() => { - window.$message.success(t('project.workflow.success')) - if (variables.tableData.length === 1 && variables.page > 1) { - variables.page -= 1 - } + deleteProcessInstanceById(id, variables.projectCode).then(() => { + window.$message.success(t('project.workflow.success')) + if (variables.tableData.length === 1 && variables.page > 1) { + variables.page -= 1 + } - getTableData() - }) + getTableData() + }) } const batchDeleteInstance = () => { @@ -292,32 +286,30 @@ export function useTable() { processInstanceIds: _.join(variables.checkedRowKeys, ',') } - batchDeleteProcessInstanceByIds(data, variables.projectCode) - .then(() => { - window.$message.success(t('project.workflow.success')) + batchDeleteProcessInstanceByIds(data, variables.projectCode).then(() => { + window.$message.success(t('project.workflow.success')) - if ( - variables.tableData.length === variables.checkedRowKeys.length && - variables.page > 1 - ) { - variables.page -= 1 - } + if ( + variables.tableData.length === variables.checkedRowKeys.length && + variables.page > 1 + ) { + variables.page -= 1 + } - variables.checkedRowKeys = [] - getTableData() - }) + variables.checkedRowKeys = [] + getTableData() + }) } /** * operating */ const _upExecutorsState = (param: ExecuteReq) => { - execute(param, variables.projectCode) - .then(() => { - window.$message.success(t('project.workflow.success')) + execute(param, variables.projectCode).then(() => { + window.$message.success(t('project.workflow.success')) - getTableData() - }) + getTableData() + }) } /** @@ -348,14 +340,13 @@ export function useTable() { const _countDownFn = (param: ICountDownParam) => { const { index } = param variables.tableData[index].buttonType = param.buttonType - execute(param, variables.projectCode) - .then(() => { - variables.tableData[index].disabled = true - window.$message.success(t('project.workflow.success')) - _countDown(() => { - getTableData() - }, index) - }) + execute(param, variables.projectCode).then(() => { + variables.tableData[index].disabled = true + window.$message.success(t('project.workflow.success')) + _countDown(() => { + getTableData() + }, index) + }) } return { diff --git a/dolphinscheduler-ui-next/src/views/resource/file/table/use-table.ts b/dolphinscheduler-ui-next/src/views/resource/file/table/use-table.ts index 7153d8374b..699fcbd99f 100644 --- a/dolphinscheduler-ui-next/src/views/resource/file/table/use-table.ts +++ b/dolphinscheduler-ui-next/src/views/resource/file/table/use-table.ts @@ -22,9 +22,9 @@ import { bytesToSize } from '@/utils/common' import { useFileStore } from '@/store/file/file' import TableAction from './table-action' import { IRenameFile } from '../types' +import ButtonLink from '@/components/button-link' import type { Router } from 'vue-router' import type { TableColumns } from 'naive-ui/es/data-table/src/interface' -import styles from './index.module.scss' const goSubFolder = (router: Router, item: any) => { const fileStore = useFileStore() @@ -55,17 +55,11 @@ export function useTable(renameResource: IRenameFile, updateList: () => void) { width: 120, render: (row) => h( - 'a', + ButtonLink, { - href: 'javascript:', - class: styles.links, - onClick: () => goSubFolder(router, row) + onClick: () => void goSubFolder(router, row) }, - { - default: () => { - return row.name - } - } + { default: () => row.name } ) }, { title: t('resource.file.user_name'), width: 100, key: 'user_name' }, diff --git a/dolphinscheduler-ui-next/src/views/resource/udf/resource/index.module.scss b/dolphinscheduler-ui-next/src/views/resource/udf/resource/index.module.scss index 989ee0f66d..a786d64488 100644 --- a/dolphinscheduler-ui-next/src/views/resource/udf/resource/index.module.scss +++ b/dolphinscheduler-ui-next/src/views/resource/udf/resource/index.module.scss @@ -70,12 +70,4 @@ align-items: center; margin-top: 20px; } - - .links { - color: #2080f0; - text-decoration: none; - &:hover { - text-decoration: underline; - } - } } diff --git a/dolphinscheduler-ui-next/src/views/resource/udf/resource/use-table.ts b/dolphinscheduler-ui-next/src/views/resource/udf/resource/use-table.ts index 164694eb54..05014d78f7 100644 --- a/dolphinscheduler-ui-next/src/views/resource/udf/resource/use-table.ts +++ b/dolphinscheduler-ui-next/src/views/resource/udf/resource/use-table.ts @@ -31,8 +31,8 @@ import { deleteResource, queryResourceById } from '@/service/modules/resources' +import ButtonLink from '@/components/button-link' import { IUdfResourceParam } from './types' -import styles from './index.module.scss' const goSubFolder = (router: Router, item: any) => { const fileStore = useFileStore() @@ -75,23 +75,15 @@ export function useTable() { title: t('resource.udf.udf_source_name'), key: 'alias', render: (row) => { - if (!row.directory) { - return row.alias - } else { - return h( - 'a', - { - href: 'javascript:', - class: styles.links, - onClick: () => goSubFolder(router, row) - }, - { - default: () => { - return row.alias - } - } - ) - } + return !row.directory + ? row.alias + : h( + ButtonLink, + { + onClick: () => void goSubFolder(router, row) + }, + { default: () => row.alias } + ) } }, { @@ -265,11 +257,10 @@ export function useTable() { fullName }, id - ) - .then((res: any) => { - fileStore.setCurrentDir(res.fullName) - router.push({ name: 'resource-sub-manage', params: { id: res.id } }) - }) + ).then((res: any) => { + fileStore.setCurrentDir(res.fullName) + router.push({ name: 'resource-sub-manage', params: { id: res.id } }) + }) } return { diff --git a/dolphinscheduler-ui/src/sass/common/_table.scss b/dolphinscheduler-ui/src/sass/common/_table.scss index 2f229a1a59..eea4e568a1 100644 --- a/dolphinscheduler-ui/src/sass/common/_table.scss +++ b/dolphinscheduler-ui/src/sass/common/_table.scss @@ -14,43 +14,43 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - .ansfont { +.ansfont { font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } - .as { +.as { display: inline-block; font-size: 14px; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } - .as-spin { - -webkit-animation: as-spin 2s infinite linear; - animation: as-spin 2s infinite linear; +.as-spin { + -webkit-animation: as-spin 2s infinite linear; + animation: as-spin 2s infinite linear; +} +@-webkit-keyframes as-spin { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); } - @-webkit-keyframes as-spin { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(359deg); - transform: rotate(359deg); - } + 100% { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); } - @keyframes as-spin { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(359deg); - transform: rotate(359deg); - } +} +@keyframes as-spin { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); } + 100% { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } +} .table-box { border-top: 1px solid #ecf3ff; .ans-checkbox-wrapper-disabled { @@ -71,7 +71,7 @@ .ellipsis { overflow: hidden; text-overflow: ellipsis; - white-space: nowrap; + white-space: nowrap; display: block; } button { @@ -97,7 +97,8 @@ &:hover { background: #ddecff; } - th,td{ + th, + td { &:nth-child(1) { width: 50px; text-align: center; @@ -108,13 +109,13 @@ width: 60px; text-align: center; } - >span { + > span { font-size: 12px; color: #555; } } td { - >span { + > span { font-size: 12px; color: #666; } @@ -126,21 +127,16 @@ } } } - .links { - color: #2d8cf0; - &:hover { - text-decoration: underline; - } - } } .table-small-model { padding: 0 10px; table { width: 100%; - tr{ + tr { background: #fff; - th,td { + th, + td { padding-left: 8px; } th { @@ -149,19 +145,16 @@ font-size: 12px; font-weight: bold; color: #333; - border-bottom: 2px solid #ECEDEC; + border-bottom: 2px solid #ecedec; } td { height: 32px; line-height: 32px; - border-bottom: 1px solid #ECEDEC; + border-bottom: 1px solid #ecedec; span { font-size: 12px; color: #333; } - .links { - color:#2d8cf0; - } } &:hover { td { @@ -171,10 +164,10 @@ } } } -.el-table--enable-row-hover .el-table__body tr:hover>td { +.el-table--enable-row-hover .el-table__body tr:hover > td { background-color: #ddecff; } -.el-table th>.cell { +.el-table th > .cell { color: #555; padding-left: 0; padding-right: 0; @@ -182,7 +175,7 @@ .el-table td div { color: #666; } -.el-table td>.cell { +.el-table td > .cell { padding-left: 0; padding-right: 0; -} \ No newline at end of file +}