Skip to content

S
smart_gov_platform
Commit 464d08f7 authored by “yiyousong”'s avatar “yiyousong”
Browse files
Options

pref:修改表格滚动样式

parent f7206328
Hide whitespace changes
Inline Side-by-side
Showing with 170 additions and 332 deletions
base-manager-ui/admin/src/assets/css/common.less
View file @ 464d08f7
@import './common.less';
@import '../../theme/default/color.less';
@import "./common.less";
@import "../../theme/default/color.less";
// 字体大小
@fz18: 18px;
@fz16: 16px;
......@@ -10,13 +10,13 @@
@cl999: #999;
@cl000: #000; //表头
@cl333: #333; //表体
@cl8B: #8B96A6;
@dlecl: #FA4D4C; //表格删除
@redact: #1890FF; //表格编辑
@cl8B: #8b96a6;
@dlecl: #fa4d4c; //表格删除
@redact: #1890ff; //表格编辑
// 按钮背景色
@addbg: linear-gradient(90deg, #5ab6ff 0%, #2e9aff 100%); //新增
@delbg: #FA4D4C; //删除
@qubg: #E1F0FE; //取消 重置
@delbg: #fa4d4c; //删除
@qubg: #e1f0fe; //取消 重置
// 分页显示位置
.pagination {
......@@ -36,22 +36,29 @@
overflow: hidden !important;
margin-bottom: 0 !important;
padding-right: 6px;
tr:only-child > th:last-child {
border-right-color: #f0f0f0 !important;
}
}
.ant-table-header {
background: #fff;
}
::-webkit-scrollbar {
width: 6px;
height:6px;
height: 6px;
overflow-y: auto;
}
::-webkit-scrollbar-thumb {
border-radius: 6px;
background-color: rgba(144, 147, 153, .5);
background-color: rgba(144, 147, 153, 0.5);
}
::-webkit-scrollbar-track {
border-radius: 6px;
background: #fff;
background: rgba(144, 147, 153, 0);
}
.color_title {
......@@ -68,20 +75,20 @@
background-color: #1890ff;
}
}
.ant-input{
.ant-input {
resize: none;
}
.ant-btn-primary{
background: linear-gradient(90deg,#5ab6ff,#2e9aff)!important;
border:none !important;
.ant-btn-primary {
background: linear-gradient(90deg, #5ab6ff, #2e9aff) !important;
border: none !important;
border-color: transparent !important;
}
.ant-form-explain{
position:absolute
.ant-form-explain {
position: absolute;
}
.ant-form-item {
display: flex;
align-items: center;
margin-bottom: 20px;
}
\ No newline at end of file
}
base-manager-ui/admin/src/assets/css/relas.css deleted 100644 → 0
View file @ f7206328
.ant-modal {
box-shadow: none !important;
}
.ant-form-item {
margin-bottom: 0;
display: flex;
align-items: center;
}
.ant-form-item-children {
display: flex;
align-items: center;
}
.ant-form-item-children input,
.ant-form-item-children textarea {
font-size: 14px;
font-weight: 400;
color: #999;
}
.ant-form-item-label label {
font-size: 14px;
font-weight: 400;
color: #8B96A6;
}
.ant-modal {
box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
}
.ant-modal-title {
color: #1890FF !important;
font-size: 18px;
font-weight: bold;
}
.ant-modal-close {
color: #188fff !important;
}
.ant-modal-close svg {
font-size: 26px !important;
}
.ant-vue-dark .ant-table-thead .ant-table-column-title {
font-size: 16px;
font-weight: 500;
color: #000;
}
.ant-vue-dark .ant-table-tbody {
font-size: 14px;
font-weight: 400;
color: #333;
}
.ant-vue-light .ant-table-thead .ant-table-column-title {
font-size: 16px;
font-weight: 500;
color: #000;
}
.ant-vue-light .ant-table-tbody {
font-size: 14px;
font-weight: 400;
color: #333;
}
.del {
color: #FA4D4C;
padding: 0 4px;
display: inline-block;
}
.del:hover {
color: #FA4D4C;
cursor: pointer;
}
.redact {
color: #1890FF;
padding: 0 4px;
display: inline-block;
}
.redact:hover {
color: #1890FF;
cursor: pointer;
}
.search input {
font-size: 14px;
color: #BFBFBF;
}
.search .chaxun {
color: #fff;
border: 1px solid #5ab6ff;
padding: 0 14px;
background: linear-gradient(90deg, #5ab6ff 0%, #2e9aff 100%);
}
.btn {
margin-top: 20px;
}
.btnclass {
font-size: 14px;
border-radius: 4px;
border: none;
margin-right: 12px;
}
.delclass {
background: #FA4D4C !important;
color: #fff !important;
}
.addclass {
background: linear-gradient(90deg, #5ab6ff 0%, #2e9aff 100%) !important;
color: #fff !important;
}
.quclass {
background: #E1F0FE !important;
color: #42A5FA !important;
border: 1px solid #E1F0FE;
}
/**
* 上传图片、文件父级添加class
* 文字和控件将向上对齐
*/
.up_load_file .ant-form-item {
align-items: flex-start;
}
.up_load_file .ant-form-item-label {
position: relative;
top: -4px;
}
.up_load_pic .ant-form-item {
align-items: flex-start;
}
.up_load_pic .ant-upload-list {
float: left;
}
th {
text-align: center !important;
}
td {
text-align: center;
}
.btn_box {
display: flex;
align-items: center;
justify-content: center;
}
.search_block {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.card_title {
font-size: 16px;
font-weight: 600;
color: #464646;
padding-left: 10px;
position: relative;
margin-bottom: 15px;
}
.card_title::before {
content: '';
position: absolute;
background: #1890ff;
border-color: #1890FF;
border-style: solid;
border-width: 2px;
height: 15px;
top: 4px;
left: 0;
}
.ant-tabs-nav-wrap {
background: #fff;
}
.ant-tabs-bar {
background: #fff;
padding-right: 20px !important;
}
.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
border-left: none !important;
border-top: none !important;
border-right: none !important;
border-bottom: none !important;
color: #999 !important;
}
.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active {
border-left: none !important;
border-top: none !important;
border-right: none !important;
}
.tabs-view-content {
background: #fff;
margin: 0 24px;
padding: 20px 24px;
min-height: 80vh;
}
.admin-layout .admin-layout-content {
padding: 20px 0 0 !important;
background: #F0F2F5;
}
.ant-pagination-item-active {
background: #1890FF;
border-radius: 4px;
}
.ant-pagination-item-active a {
color: #fff;
}
base-manager-ui/admin/src/assets/css/relas.less
View file @ 464d08f7
......@@ -223,22 +223,22 @@ td{
background: #fff;
}
.ant-tabs-bar{
background: #fff;
padding-right: 20px !important;
}
.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab{
border-left: none !important;
border-top: none !important;
border-right: none !important;
border-bottom: none !important;
color: #999 !important;
}
.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active{
border-left: none !important;
border-top: none !important;
border-right: none !important;
}
// .ant-tabs-bar{
// background: #fff;
// padding-right: 20px !important;
// }
// .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab{
// border-left: none !important;
// border-top: none !important;
// border-right: none !important;
// border-bottom: none !important;
// color: #999 !important;
// }
// .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active{
// border-left: none !important;
// border-top: none !important;
// border-right: none !important;
// }
// 内容
.tabs-view-content{
// background: #fff;
......
base-manager-ui/admin/src/layouts/Layouts.vue
View file @ 464d08f7
......@@ -5,7 +5,7 @@
<div class="flex aic">
<router-link to="/" class="flex aic">
<img class="mr10" width="32" src="@/assets/img/logo.png" />
<h1 class="title">基础设置平台</h1>
<h1 class="title">基础设置系统</h1>
</router-link>
<HeaderSite class="ml20"></HeaderSite>
</div>
......@@ -28,7 +28,7 @@
<a-layout-sider width="200" style="background: #fff">
<i-menu theme="light" :options="menuData" class="menu" />
</a-layout-sider>
<a-layout class="main" style="padding: 0 24px 24px">
<a-layout class="main">
<a-layout-content>
<keep-alive>
<!-- 需要缓存的视图组件 -->
......@@ -93,7 +93,23 @@ export default {
}
.main {
height: calc(100vh - 64px);
padding: 0px 24px 24px;
overflow-y: auto;
&::-webkit-scrollbar {
width: 6px;
height: 6px;
overflow-y: auto;
}
&::-webkit-scrollbar-thumb {
border-radius: 6px;
background-color: rgba(144, 147, 153, 0.5);
}
&::-webkit-scrollbar-track {
border-radius: 6px;
background: rgba(144, 147, 153, 0);
}
}
.ant-layout-content {
height: 100%;
......
base-manager-ui/admin/src/pages/basicset/deploy/deploy.vue
View file @ 464d08f7
<template>
<div class="deploy">
<a-card title="部署板块管理" :bordered="false">
<div class="control">
<div>
<a-button type="primary" style="margin-right: 10px" @click="handleAdd"
>新增模块</a-button
>
<a-button type="danger" @click="handleDelAll">批量删除模块</a-button>
</div>
<div class="search-box">
<a-input-search
placeholder="请输入模块名搜索"
enter-button="搜索"
v-model="searchValue"
allowClear
@search="onSearch"
@pressEnter="onSearch"
/>
<a-tabs activeKey="model">
<a-tab-pane key="model" tab="部署板块管理">
<div class="control">
<div>
<a-button
type="primary"
style="margin-right: 10px"
@click="handleAdd"
>新增模块</a-button
>
<a-button type="danger" @click="handleDelAll"
>批量删除模块</a-button
>
</div>
<div class="search-box">
<a-input-search
placeholder="请输入模块名搜索"
enter-button="搜索"
v-model="searchValue"
allowClear
@search="onSearch"
@pressEnter="onSearch"
/>
</div>
</div>
</div>
<!-- 表格 -->
<div class="table-content">
<a-table
:row-selection="{
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange,
}"
:loading="loading"
bordered
:scroll="{ y: 560 }"
:columns="columns"
:pagination="{
showTotal: (total) => `共 ${total} 条`,
current: current,
total: total,
pageSize: size,
showSizeChanger: true,
showQuickJumper: true,
pageSizeOptions: pageSizeOptions,
onChange: handleChange,
onShowSizeChange: showSizeChange,
}"
:data-source="modelList"
:rowKey="(record) => record.id"
>
<!-- 序号 -->
<span slot="num" slot-scope="text, record, index">{{
(current - 1) * size + index + 1
}}</span>
<!-- 模块地址 -->
<template slot="modelUrl" slot-scope="text">
{{ text.modelUrl ? text.modelUrl : "--" }}
</template>
<!-- 模块图标 -->
<template slot="modelIcon" slot-scope="text">
<div v-if="text.modelIcon">
<!-- <div class="svg-box" v-if="isSvg(text.modelIcon)">
<!-- 表格 -->
<div class="table-content">
<a-table
:row-selection="{
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange,
}"
:loading="loading"
bordered
:columns="columns"
:scroll="{ y: 580 }"
:pagination="{
showTotal: (total) => `共 ${total} 条`,
current: current,
total: total,
pageSize: size,
showSizeChanger: true,
showQuickJumper: true,
pageSizeOptions: pageSizeOptions,
onChange: handleChange,
onShowSizeChange: showSizeChange,
}"
:data-source="modelList"
:rowKey="(record) => record.id"
>
<!-- 序号 -->
<span slot="num" slot-scope="text, record, index">{{
(current - 1) * size + index + 1
}}</span>
<!-- 模块地址 -->
<template slot="modelUrl" slot-scope="text">
{{ text.modelUrl ? text.modelUrl : "--" }}
</template>
<!-- 模块图标 -->
<template slot="modelIcon" slot-scope="text">
<div v-if="text.modelIcon">
<!-- <div class="svg-box" v-if="isSvg(text.modelIcon)">
<img width="30" height="30" :src="api2 + text.modelIcon" />
</div> -->
<div class="svg-box">
<img width="30" height="30" :src="api2 + text.modelIcon" />
<div class="svg-box">
<img width="30" height="30" :src="api2 + text.modelIcon" />
</div>
</div>
</div>
<span v-else>--</span>
</template>
<!-- 排序 -->
<template slot="sort" slot-scope="text">
{{ text.sort ? text.sort : "--" }}
</template>
<!-- 创建时间 -->
<template slot="createTime" slot-scope="text">
{{ text.createTime | dateFormat }}
</template>
<!-- 备注 -->
<template slot="remark" slot-scope="text">
{{ text.remark ? text.remark : "--" }}
</template>
<!-- 操作 -->
<template slot="action" slot-scope="text">
<a-space>
<a
href="javascript:;"
class="primary"
@click="statementManage(text)"
>配置报表</a
>
<a href="javascript:;" class="edit" @click="handleEdit(text)"
>编辑</a
>
<a href="javascript:;" class="delete" @click="handleDel(text.id)"
>删除</a
>
</a-space>
</template>
</a-table>
</div>
</a-card>
<span v-else>--</span>
</template>
<!-- 排序 -->
<template slot="sort" slot-scope="text">
{{ text.sort ? text.sort : "--" }}
</template>
<!-- 创建时间 -->
<template slot="createTime" slot-scope="text">
{{ text.createTime | dateFormat }}
</template>
<!-- 备注 -->
<template slot="remark" slot-scope="text">
{{ text.remark ? text.remark : "--" }}
</template>
<!-- 操作 -->
<template slot="action" slot-scope="text">
<a-space>
<a
href="javascript:;"
class="primary"
@click="statementManage(text)"
>配置报表</a
>
<a href="javascript:;" class="primary" @click="handleEdit(text)"
>编辑</a
>
<a
href="javascript:;"
class="delete"
@click="handleDel(text.id)"
>删除</a
>
</a-space>
</template>
</a-table>
</div>
</a-tab-pane>
</a-tabs>
<!-- 新增模块 -->
<a-modal
v-model="visible"
......@@ -520,6 +530,7 @@ export default {
width: 100%;
height: 100%;
background-color: #fff;
.control {
display: flex;
justify-content: space-between;
......@@ -532,20 +543,20 @@ export default {
// .table-content {
// height: 620px;
// }
.edit {
color: #03d76f;
}
.delete {
color: #f94545;
}
}
.ant-tabs {
width: 100%;
background-color: #fff;
min-height: 100%;
}
/deep/.ant-tabs-content {
padding: 0px 15px 15px 15px;
}
.handle-upload {
margin-bottom: 30px !important;
align-items: flex-start !important;
}
/deep/.ant-card {
width: 100% !important;
}
.svg-box,
/deep/.ant-upload-list-item-thumbnail {
background-color: #54788c;
......
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