tzjy-code
/
DataRoom
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: 修改整体样式，组件独立，脱离头部布局时，样式继承外部样式，不发生变化

Browse Source
main
wu.jian2 2 years ago
parent 46b8e06a13
commit 79f6fe340e
14 changed files with 473 additions and 446 deletions
Show Stats Download Patch File Download Diff File

2
data-room-ui/packages/BigScreenComponentMag/MenuContent.vue
Unescape Escape View File

@ -27,6 +27,6 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.right-screen-list-wrap { .right-screen-list-wrap {
width: 100%; width: 100%;
height: 100%; // height: 100%;
} }
</style> </style>

253
data-room-ui/packages/BigScreenList/index.vue
Unescape Escape View File

@ -1,154 +1,157 @@
<template> <template>
<div class="big-screen-list-wrap"> <div class="big-screen-list-wrap">
<div class="top-search-wrap"> <div class="internal-box">
<el-input <div class="top-search-wrap">
v-model="searchKey" <el-input
class="bs-el-input bs-el-input-search" v-model="searchKey"
:placeholder="type === 'bigScreenCatalog' ?'请输入大屏名称':'请输入组件名称'" class="bs-el-input bs-el-input-search"
prefix-icon="el-icon-search" :placeholder="type === 'bigScreenCatalog' ?'请输入大屏名称':'请输入组件名称'"
clearable prefix-icon="el-icon-search"
@clear="reSearch" clearable
@keyup.enter.native="reSearch" @clear="reSearch"
/> @keyup.enter.native="reSearch"
<el-button />
type="primary" <el-button
@click="reSearch" type="primary"
> @click="reSearch"
搜索 >
</el-button> 搜索
</div> </el-button>
<div </div>
v-loading="loading"
class="list-wrap bs-scrollbar"
element-loading-text="加载中"
:style="{
display: gridComputed ? 'grid' : 'flex',
justifyContent: gridComputed ? 'space-around' : 'flex-start'
}"
>
<!-- 第一个是新增大屏卡片 -->
<div <div
class="big-screen-card-wrap" v-loading="loading"
class="list-wrap bs-scrollbar"
element-loading-text="加载中"
:style="{ :style="{
width: gridComputed ? 'auto' : '290px' display: gridComputed ? 'grid' : 'flex',
justifyContent: gridComputed ? 'space-around' : 'flex-start'
}" }"
@click="add"
> >
<div class="big-screen-card-inner big-screen-card-inner-add"> <!-- 第一个是新增大屏卡片 -->
<div class="add-big-screen-card"> <div
<div class="add-big-screen-card-inner"> class="big-screen-card-wrap"
<div class="add-big-screen-card-text"> :style="{
新建{{ type === 'bigScreenCatalog' ? '大屏' : '组件' }} width: gridComputed ? 'auto' : '290px'
}"
@click="add"
>
<div class="big-screen-card-inner big-screen-card-inner-add">
<div class="add-big-screen-card">
<div class="add-big-screen-card-inner">
<div class="add-big-screen-card-text">
新建{{ type === 'bigScreenCatalog' ? '大屏' : '组件' }}
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <!-- 后面遍历 list -->
<!-- 后面遍历 list --> <div
<div v-for="screen in list"
v-for="screen in list" :key="screen.id"
:key="screen.id" class="big-screen-card-wrap"
class="big-screen-card-wrap" :style="{
:style="{ width: gridComputed ? 'auto' : '290px'
width: gridComputed ? 'auto' : '290px' }"
}" >
> <div class="big-screen-card-inner">
<div class="big-screen-card-inner"> <div class="screen-card__hover">
<div class="screen-card__hover"> <div class="screen-card__hover-box">
<div class="screen-card__hover-box"> <div class="preview">
<div class="preview"> <div
<div class="screen-card__oper-label circle"
class="screen-card__oper-label circle" @click="preview(screen)"
@click="preview(screen)" >
> <span>预览</span>
<span>预览</span> </div>
</div> <div
<div class="circle"
class="circle" @click="design(screen)"
@click="design(screen)" >
> <span>设计</span>
<span>设计</span> </div>
</div> <div
<div class="circle"
class="circle" @click="edit(screen)"
@click="edit(screen)" >
> <span>编辑</span>
<span>编辑</span> </div>
<div
class="circle"
@click="copy(screen)"
>
<span>复制</span>
</div>
<div
class="circle"
@click="del(screen)"
>
<span>删除</span>
</div>
</div> </div>
</div>
</div>
<div class="big-screen-card-img">
<el-image
:src="screen.coverPicture"
fit="fill"
style="width: 100%; height: 100%"
>
<div <div
class="circle" slot="placeholder"
@click="copy(screen)" class="image-slot"
> >
<span>复制</span> 加载中···
</div> </div>
<div <div
class="circle" slot="error"
@click="del(screen)" class="image-slot"
style="font-size: 20px"
> >
<span>删除</span> <div class="error-img-text">
{{ screen.name }}
</div>
</div> </div>
</div> </el-image>
</div> </div>
</div> <div class="big-screen-bottom">
<div class="big-screen-card-img">
<el-image
:src="screen.coverPicture"
fit="fill"
style="width: 100%; height: 100%"
>
<div <div
slot="placeholder" class="left-bigscreen-title"
class="image-slot" :title="screen.name"
> >
加载中··· {{ screen.name }}
</div> </div>
<div
slot="error"
class="image-slot"
style="font-size: 20px"
>
<div class="error-img-text">
{{ screen.name }}
</div>
</div>
</el-image>
</div>
<div class="big-screen-bottom">
<div
class="left-bigscreen-title"
:title="screen.name"
>
{{ screen.name }}
</div>
<!-- <div class="right-bigscreen-time-title">--> <!-- <div class="right-bigscreen-time-title">-->
<!-- {{ screen.updateDate || '-' }}--> <!-- {{ screen.updateDate || '-' }}-->
<!-- </div>--> <!-- </div>-->
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="footer-pagination-wrap"> <div class="footer-pagination-wrap">
<!-- <div class="footer-pagination-wrap-text"> <!-- <div class="footer-pagination-wrap-text">
总共 {{ totalCount }} 个项目 总共 {{ totalCount }} 个项目
</div> --> </div> -->
<div class="bs-pagination"> <div class="bs-pagination">
<el-pagination <el-pagination
class="bs-el-pagination" class="bs-el-pagination"
popper-class="bs-el-pagination" popper-class="bs-el-pagination"
background background
layout="total, prev, pager, next, sizes" layout="total, prev, pager, next, sizes"
:page-size="size" :page-size="size"
prev-text="上一页" prev-text="上一页"
next-text="下一页" next-text="下一页"
:total="totalCount" :total="totalCount"
:page-sizes="[10, 20, 50, 100]" :page-sizes="[10, 20, 50, 100]"
:current-page="current" :current-page="current"
@current-change="currentChangeHandle" @current-change="currentChangeHandle"
@size-change="sizeChangeHandle" @size-change="sizeChangeHandle"
/> />
</div>
</div> </div>
</div> </div>
<!-- 新增或编辑弹窗 --> <!-- 新增或编辑弹窗 -->
<EditForm <EditForm
ref="EditForm" ref="EditForm"
@ -317,10 +320,13 @@ export default {
height: 100%; height: 100%;
// margin:0 16px; // margin:0 16px;
margin-left: 16px; margin-left: 16px;
padding: 16px; // padding: 16px;
color: #9ea9b2; color: #9ea9b2;
background-color: var(--bs-background-2) !important; background-color: var(--bs-background-2) !important;
.internal-box{
height: calc(100% - 32px);
padding: 16px;
}
.top-search-wrap { .top-search-wrap {
display: flex; display: flex;
align-items: center; align-items: center;
@ -339,14 +345,15 @@ export default {
.list-wrap { .list-wrap {
/* display: grid; */ /* display: grid; */
overflow: auto; overflow: auto;
padding-right: 5px;
// 间隙自适应 // 间隙自适应
justify-content: space-around; justify-content: space-around;
// max-height: calc(100vh - 304px); // max-height: calc(100vh - 304px);
height: calc(100% - 96px); max-height: calc(100% - 90px);
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 15px; grid-gap: 15px;
padding-bottom: 10px;
// /deep/ .el-loading-mask { // /deep/ .el-loading-mask {
// display: flex; // display: flex;
// align-items: center; // align-items: center;

2
data-room-ui/packages/BigScreenMag/MenuContent.vue
Unescape Escape View File

@ -35,6 +35,6 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.right-screen-list-wrap { .right-screen-list-wrap {
width: 100%; width: 100%;
height: 100%; // height: 100%;
} }
</style> </style>

312
data-room-ui/packages/ComponentList/index.vue
Unescape Escape View File

@ -1,180 +1,182 @@
<template> <template>
<div class="big-screen-list-wrap"> <div class="big-screen-list-wrap">
<div class="top-search-wrap"> <div class="internal-box">
<el-select <div class="top-search-wrap">
v-if="catalogInfo !== 'system'" <el-select
v-model="catalogCode" v-if="catalogInfo !== 'system'"
class="bs-el-select" v-model="catalogCode"
popper-class="bs-el-select" class="bs-el-select"
placeholder="请选择分组" popper-class="bs-el-select"
clearable placeholder="请选择分组"
@change="reSearch" clearable
> @change="reSearch"
<el-option >
v-for="item in catalogList" <el-option
:key="item.code" v-for="item in catalogList"
:label="item.name" :key="item.code"
:value="item.code" :label="item.name"
:value="item.code"
/>
</el-select>
<el-input
v-model="searchKey"
class="bs-el-input"
placeholder="请输入组件名称"
prefix-icon="el-icon-search"
clearable
@clear="reSearch"
@keyup.enter.native="reSearch"
/> />
</el-select> <el-button
<el-input type="primary"
v-model="searchKey" @click="reSearch"
class="bs-el-input" >
placeholder="请输入组件名称" 搜索
prefix-icon="el-icon-search" </el-button>
clearable <el-button
@clear="reSearch" v-if="catalogInfo !== 'system'"
@keyup.enter.native="reSearch" type="primary"
/> @click="catalogManage"
<el-button >
type="primary" 分组管理
@click="reSearch" </el-button>
> </div>
搜索
</el-button>
<el-button
v-if="catalogInfo !== 'system'"
type="primary"
@click="catalogManage"
>
分组管理
</el-button>
</div>
<div
v-loading="loading"
class="list-wrap bs-scrollbar"
element-loading-text="加载中"
:style="{
display: gridComputed ? 'grid' : 'flex',
justifyContent: gridComputed ? 'space-around' : 'flex-start'
}"
>
<!-- 第一个是新增大屏卡片 -->
<div <div
v-if="catalogInfo !== 'system'" v-loading="loading"
class="big-screen-card-wrap" class="list-wrap bs-scrollbar"
element-loading-text="加载中"
:style="{ :style="{
width: gridComputed ? 'auto' : '290px' display: gridComputed ? 'grid' : 'flex',
justifyContent: gridComputed ? 'space-around' : 'flex-start'
}" }"
@click="add"
> >
<div class="big-screen-card-inner big-screen-card-inner-add"> <!-- 第一个是新增大屏卡片 -->
<div class="add-big-screen-card"> <div
<div class="add-big-screen-card-inner"> v-if="catalogInfo !== 'system'"
<div class="add-big-screen-card-text"> class="big-screen-card-wrap"
新建组件 :style="{
width: gridComputed ? 'auto' : '290px'
}"
@click="add"
>
<div class="big-screen-card-inner big-screen-card-inner-add">
<div class="add-big-screen-card">
<div class="add-big-screen-card-inner">
<div class="add-big-screen-card-text">
新建组件
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <!-- 后面遍历 list -->
<!-- 后面遍历 list --> <div
<div v-for="screen in list"
v-for="screen in list" :key="screen.id"
:key="screen.id" class="big-screen-card-wrap"
class="big-screen-card-wrap" :style="{
:style="{ width: gridComputed ? 'auto' : '290px'
width: gridComputed ? 'auto' : '290px' }"
}" >
> <div class="big-screen-card-inner">
<div class="big-screen-card-inner"> <div class="screen-card__hover">
<div class="screen-card__hover"> <div class="screen-card__hover-box">
<div class="screen-card__hover-box"> <div class="preview">
<div class="preview"> <div
<div class="screen-card__oper-label circle"
class="screen-card__oper-label circle" @click="preview(screen)"
@click="preview(screen)" >
> <span>预览</span>
<span>预览</span> </div>
</div> <div
<div v-if="catalogInfo !== 'system'"
v-if="catalogInfo !== 'system'" class="circle"
class="circle" @click="design(screen)"
@click="design(screen)" >
> <span>设计</span>
<span>设计</span> </div>
</div> <div
<div v-if="catalogInfo !== 'system'"
v-if="catalogInfo !== 'system'" class="circle"
class="circle" @click="edit(screen)"
@click="edit(screen)" >
> <span>编辑</span>
<span>编辑</span> </div>
<div
v-if="catalogInfo !== 'system'"
class="circle"
@click="copy(screen)"
>
<span>复制</span>
</div>
<div
v-if="catalogInfo !== 'system'"
class="circle"
@click="del(screen)"
>
<span>删除</span>
</div>
</div> </div>
</div>
</div>
<div class="big-screen-card-img">
<el-image
:src="catalogInfo !== 'system' ? screen.coverPicture : screen.img"
fit="fill"
style="width: 100%; height: 100%"
>
<div <div
v-if="catalogInfo !== 'system'" slot="placeholder"
class="circle" class="image-slot"
@click="copy(screen)"
> >
<span>复制</span> 加载中···
</div> </div>
<div <div
v-if="catalogInfo !== 'system'" slot="error"
class="circle" class="image-slot"
@click="del(screen)" style="font-size: 20px"
> >
<span>删除</span> <div class="error-img-text">
{{ catalogInfo !== 'system'? screen.name : screen.title }}
</div>
</div> </div>
</div> </el-image>
</div> </div>
</div> <div class="big-screen-bottom">
<div class="big-screen-card-img">
<el-image
:src="catalogInfo !== 'system' ? screen.coverPicture : screen.img"
fit="fill"
style="width: 100%; height: 100%"
>
<div <div
slot="placeholder" class="left-bigscreen-title"
class="image-slot" :title="catalogInfo !== 'system'? screen.name : screen.title"
> >
加载中··· {{ catalogInfo !== 'system'? screen.name : screen.title }}
</div> </div>
<div
slot="error"
class="image-slot"
style="font-size: 20px"
>
<div class="error-img-text">
{{ catalogInfo !== 'system'? screen.name : screen.title }}
</div>
</div>
</el-image>
</div>
<div class="big-screen-bottom">
<div
class="left-bigscreen-title"
:title="catalogInfo !== 'system'? screen.name : screen.title"
>
{{ catalogInfo !== 'system'? screen.name : screen.title }}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div <div
v-if="catalogInfo !== 'system'" v-if="catalogInfo !== 'system'"
class="footer-pagination-wrap" class="footer-pagination-wrap"
> >
<!-- <div class="footer-pagination-wrap-text"> <!-- <div class="footer-pagination-wrap-text">
总共 {{ totalCount }} 个项目 总共 {{ totalCount }} 个项目
</div> --> </div> -->
<div class="bs-pagination"> <div class="bs-pagination">
<el-pagination <el-pagination
class="bs-el-pagination" class="bs-el-pagination"
popper-class="bs-el-pagination" popper-class="bs-el-pagination"
background background
layout="total, prev, pager, next, sizes" layout="total, prev, pager, next, sizes"
:page-size="size" :page-size="size"
prev-text="上一页" prev-text="上一页"
next-text="下一页" next-text="下一页"
:total="totalCount" :total="totalCount"
:page-sizes="[10, 20, 50, 100]" :page-sizes="[10, 20, 50, 100]"
:current-page="current" :current-page="current"
@current-change="currentChangeHandle" @current-change="currentChangeHandle"
@size-change="sizeChangeHandle" @size-change="sizeChangeHandle"
/> />
</div>
</div> </div>
</div> </div>
<!-- 新增或编辑弹窗 --> <!-- 新增或编辑弹窗 -->
@ -424,12 +426,15 @@ export default {
.big-screen-list-wrap { .big-screen-list-wrap {
position: relative; position: relative;
height: 100%; height: 100%;
padding: 16px; // padding: 16px;
// margin:0 16px; // margin:0 16px;
margin-left: 16px; margin-left: 16px;
color: #9ea9b2; color: #9ea9b2;
background-color: var(--bs-background-2) !important; background-color: var(--bs-background-2) !important;
.internal-box{
height: calc(100% - 32px);
padding: 16px;
}
.top-search-wrap { .top-search-wrap {
display: flex; display: flex;
align-items: center; align-items: center;
@ -454,15 +459,16 @@ export default {
.list-wrap { .list-wrap {
/* display: grid; */ /* display: grid; */
overflow: auto; overflow: auto;
padding-right: 5px;
// 间隙自适应 // 间隙自适应
justify-content: space-around; justify-content: space-around;
// max-height: calc(100vh - 304px); // max-height: calc(100vh - 304px);
height: calc(100% - 96px); max-height: calc(100% - 90px);
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 15px; grid-gap: 15px;
padding-bottom: 10px;
// /deep/ .el-loading-mask { // /deep/ .el-loading-mask {
// display: flex; // display: flex;
// align-items: center; // align-items: center;

26
data-room-ui/packages/DataSetManagement/src/index.vue
Unescape Escape View File

@ -604,6 +604,9 @@ export default {
@import '../../assets/style/bsTheme.scss'; @import '../../assets/style/bsTheme.scss';
@import '../../assets/style/zTree/treePackUp.scss'; @import '../../assets/style/zTree/treePackUp.scss';
::v-deep .big-screen-router-view-wrap{
padding-left: 16px !important;
}
.bs-pagination { .bs-pagination {
::v-deep .el-input__inner { ::v-deep .el-input__inner {
width: 110px !important; width: 110px !important;
@ -618,29 +621,6 @@ export default {
} }
} }
.right-box {
margin-left: 20px;
// ::v-deep .ztreeNodeMenu {
// ul {
// background-color: var(--bs-background-1);
// }
// li:hover {
// background-color: var(--bs-el-color-primary);
// }
// span {
// color: var(--bs-el-text);
// }
// .triangle {
// background-color: var(--bs-background-1) !important;
// }
// }
}
::v-deep .left-tab-box { ::v-deep .left-tab-box {
span { span {
color: var(--bs-el-text); color: var(--bs-el-text);

10
data-room-ui/packages/DataSetSetting/dataSetSetting.vue
Unescape Escape View File

@ -96,7 +96,9 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../assets/style/bsTheme.scss'; @import '../assets/style/bsTheme.scss';
::v-deep .big-screen-router-view-wrap{
padding-left: 16px !important;
}
.data-set-wrap { .data-set-wrap {
/deep/ .el-dialog__body { /deep/ .el-dialog__body {
position: relative; position: relative;
@ -123,6 +125,12 @@ export default {
} }
.bs-data-set-management { .bs-data-set-management {
::v-deep .bs-container{
margin-left: 0 !important;
}
::v-deep .layout {
position: absolute !important;
}
::v-deep .ztree { ::v-deep .ztree {
height: auto !important; height: auto !important;
} }

4
data-room-ui/packages/DataSourceManagement/src/index.vue
Unescape Escape View File

@ -178,6 +178,10 @@ export default {
}, },
mounted () { mounted () {
this.init() this.init()
const layoutEl = document.querySelector('.big-screen-router-view-wrap')
if (layoutEl) {
layoutEl.style.padding = '16px'
}
}, },
methods: { methods: {
// 获取当前选择数据集id // 获取当前选择数据集id

4
data-room-ui/packages/Layout/BigScreenHomeLayout/index.vue
Unescape Escape View File

@ -149,7 +149,9 @@ export default {
height: calc(100vh - 150px); height: calc(100vh - 150px);
background-color: var(--bs-background-1); background-color: var(--bs-background-1);
box-sizing: border-box; box-sizing: border-box;
padding: 16px 16px 16px 0; padding-top: 16px;
padding-right: 16px;
padding-bottom: 16px;
} }
} }

277
data-room-ui/packages/SourceList/index.vue
Unescape Escape View File

@ -1,162 +1,165 @@
<template> <template>
<div class="big-screen-list-wrap"> <div class="big-screen-list-wrap">
<div class="top-search-wrap"> <div class="internal-box">
<el-input <div class="top-search-wrap">
v-model="searchKey" <el-input
class="bs-el-input" v-model="searchKey"
placeholder="请输入图片名称" class="bs-el-input"
prefix-icon="el-icon-search" placeholder="请输入图片名称"
clearable prefix-icon="el-icon-search"
@clear="reSearch" clearable
@keyup.enter.native="reSearch" @clear="reSearch"
/> @keyup.enter.native="reSearch"
<el-select
v-model="extend"
class="bs-el-select"
popper-class="bs-el-select"
placeholder="请选择图片格式"
clearable
@change="reSearch"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/> />
</el-select> <el-select
<el-button v-model="extend"
size="small" class="bs-el-select"
style="margin-right: 20px" popper-class="bs-el-select"
type="primary" placeholder="请选择图片格式"
@click="reSearch" clearable
> @change="reSearch"
搜索 >
</el-button> <el-option
<el-upload v-for="item in options"
accept="image/*, video/*" :key="item.value"
class="upload-demo" :label="item.label"
:action="upLoadUrl" :value="item.value"
:headers="headers" />
:data="{ module: code }" </el-select>
:before-upload="beforeUpload"
:on-success="uploadSuccess"
:on-error="uploadError"
multiple
:file-list="fileList"
:show-file-list="false"
>
<el-button <el-button
size="small" size="small"
style="margin-right: 20px"
type="primary" type="primary"
@click="reSearch"
> >
上传资源 搜索
</el-button> </el-button>
</el-upload> <el-upload
</div> accept="image/*, video/*"
<div class="upload-demo"
v-if="list.length !== 0" :action="upLoadUrl"
v-loading="loading" :headers="headers"
class="list-wrap bs-scrollbar" :data="{ module: code }"
element-loading-text="加载中" :before-upload="beforeUpload"
:style="{ :on-success="uploadSuccess"
display: gridComputed ? 'grid' : 'flex', :on-error="uploadError"
justifyContent: gridComputed ? 'space-around' : 'flex-start' multiple
}" :file-list="fileList"
> :show-file-list="false"
<!-- <div v-if="list.length !== 0"> --> >
<el-button
size="small"
type="primary"
>
上传资源
</el-button>
</el-upload>
</div>
<div <div
v-for="screen in list" v-if="list.length !== 0"
:key="screen.id" v-loading="loading"
class="big-screen-card-wrap" class="list-wrap bs-scrollbar"
element-loading-text="加载中"
:style="{ :style="{
width: gridComputed ? 'auto' : '290px' display: gridComputed ? 'grid' : 'flex',
justifyContent: gridComputed ? 'space-around' : 'flex-start'
}" }"
> >
<div class="big-screen-card-inner"> <!-- <div v-if="list.length !== 0"> -->
<div class="screen-card__hover"> <div
<div class="screen-card__hover-box"> v-for="screen in list"
<div class="preview"> :key="screen.id"
<div class="big-screen-card-wrap"
class="screen-card__oper-label circle" :style="{
@click="preview(screen)" width: gridComputed ? 'auto' : '290px'
> }"
<span>预览</span> >
</div> <div class="big-screen-card-inner">
<div <div class="screen-card__hover">
class="circle" <div class="screen-card__hover-box">
@click="downLoad(screen)" <div class="preview">
> <div
<span>下载</span> class="screen-card__oper-label circle"
</div> @click="preview(screen)"
<div >
class="circle" <span>预览</span>
@click="del(screen)" </div>
> <div
<span>删除</span> class="circle"
@click="downLoad(screen)"
>
<span>下载</span>
</div>
<div
class="circle"
@click="del(screen)"
>
<span>删除</span>
</div>
<div
class="circle"
@click="copy(screen)"
>
<span>链接</span>
</div>
</div> </div>
</div>
</div>
<div class="big-screen-card-img">
<el-image
:src="screen.url"
fit="contain"
style="width: 100%; height: 100%"
>
<div <div
class="circle" slot="placeholder"
@click="copy(screen)" class="image-slot"
> >
<span>链接</span> 加载中···
</div> </div>
</div> </el-image>
</div> </div>
</div> <div class="big-screen-bottom">
<div class="big-screen-card-img">
<el-image
:src="screen.url"
fit="contain"
style="width: 100%; height: 100%"
>
<div <div
slot="placeholder" class="left-bigscreen-title"
class="image-slot" :title="screen.originalName"
> >
加载中··· {{ screen.originalName }}
</div> </div>
</el-image>
</div>
<div class="big-screen-bottom">
<div
class="left-bigscreen-title"
:title="screen.originalName"
>
{{ screen.originalName }}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <div
<div v-else
v-else class="empty"
class="empty" >
> 暂无数据
暂无数据 </div>
</div>
<div class="footer-pagination-wrap"> <div class="footer-pagination-wrap">
<!-- <div class="footer-pagination-wrap-text"> <!-- <div class="footer-pagination-wrap-text">
总共 {{ totalCount }} 个项目 总共 {{ totalCount }} 个项目
</div> --> </div> -->
<div class="bs-pagination"> <div class="bs-pagination">
<el-pagination <el-pagination
class="bs-el-pagination" class="bs-el-pagination"
popper-class="bs-el-pagination" popper-class="bs-el-pagination"
background background
layout="total, prev, pager, next, sizes" layout="total, prev, pager, next, sizes"
:page-size="size" :page-size="size"
prev-text="上一页" prev-text="上一页"
next-text="下一页" next-text="下一页"
:total="totalCount" :total="totalCount"
:page-sizes="[10, 20, 50, 100]" :page-sizes="[10, 20, 50, 100]"
:current-page="current" :current-page="current"
@current-change="currentChangeHandle" @current-change="currentChangeHandle"
@size-change="sizeChangeHandle" @size-change="sizeChangeHandle"
/> />
</div>
</div> </div>
</div> </div>
<!-- 新增或编辑弹窗 --> <!-- 新增或编辑弹窗 -->
<EditForm <EditForm
ref="EditForm" ref="EditForm"
@ -327,14 +330,17 @@ export default {
@import '../assets/style/bsTheme.scss'; @import '../assets/style/bsTheme.scss';
.big-screen-list-wrap { .big-screen-list-wrap {
position: relative; position: relative;
height: 100%; height: calc(100%);
// height: calc(100% - 16px); // height: calc(100% - 16px);
padding: 16px; // padding: 16px;
color: #9ea9b2; color: #9ea9b2;
// margin:0 16px; // margin:0 16px;
margin-left: 16px; margin-left: 16px;
background-color: var(--bs-background-2) !important; background-color: var(--bs-background-2) !important;
.internal-box{
height: calc(100% - 32px);
padding: 16px;
}
.top-search-wrap { .top-search-wrap {
display: flex; display: flex;
align-items: center; align-items: center;
@ -360,14 +366,15 @@ export default {
.list-wrap { .list-wrap {
/* display: grid; */ /* display: grid; */
overflow: auto; overflow: auto;
padding-right: 5px;
// 间隙自适应 // 间隙自适应
justify-content: space-around; justify-content: space-around;
// max-height: calc(100vh - 304px); // max-height: calc(100vh - 304px);
height: calc(100% - 96px); max-height: calc(100% - 90px);
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 15px; grid-gap: 15px;
padding-bottom: 10px;
// /deep/ .el-loading-mask { // /deep/ .el-loading-mask {
// display: flex; // display: flex;
// align-items: center; // align-items: center;

2
data-room-ui/packages/SourceMag/MenuContent.vue
Unescape Escape View File

@ -33,6 +33,6 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.right-screen-list-wrap { .right-screen-list-wrap {
width: 100%; width: 100%;
height: 100%; // height: 100%;
} }
</style> </style>

11
data-room-ui/packages/assets/style/bsTheme.scss
Unescape Escape View File

@ -99,7 +99,9 @@
color: var(--bs-el-text) !important; color: var(--bs-el-text) !important;
border-color: var(--bs-el-border) !important; border-color: var(--bs-el-border) !important;
.cell {
color: var(--bs-el-text) !important;
}
th.is-leaf { th.is-leaf {
background-color: var(--bs-el-background-1) !important; background-color: var(--bs-el-background-1) !important;
} }
@ -338,7 +340,9 @@
border-top-color: var(--bs-el-background-1) !important; border-top-color: var(--bs-el-background-1) !important;
&:after { &:after {
display: none; border-bottom-color: var(--bs-el-background-1) !important;
border-top-color: var(--bs-el-background-1) !important;
display: none !important;
} }
} }
@ -468,7 +472,10 @@
border-bottom-color: var(--bs-el-background-1) !important; border-bottom-color: var(--bs-el-background-1) !important;
&:after { &:after {
border-bottom-color: var(--bs-el-background-1) !important;
border-top-color: var(--bs-el-background-1) !important;
display: none !important; display: none !important;
} }
} }
} }

7
data-room-ui/packages/assets/style/common/index.scss
Unescape Escape View File

@ -6,16 +6,16 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index"; @import "~element-ui/packages/theme-chalk/src/index";
// 布局样式 // 布局样式
.bs-container { .bs-container {
position: relative;
height: 100% !important; height: 100% !important;
// width: 100%; // width: 100%;
// position: absolute; // position: absolute;
box-sizing: border-box; box-sizing: border-box;
// padding: 16px; // padding: 16px;
margin-left: 16px;
background-color: var(--bs-background-1); background-color: var(--bs-background-1);
.inner-container { .inner-container {
height: 100% !important; height: 100% !important;
background-color: var(--bs-background-2); background-color: var(--bs-background-2) !important;
.filter-container { .filter-container {
padding: 16px 16px 6px; padding: 16px 16px 6px;
@ -41,6 +41,9 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
// page页样式 // page页样式
.bs-pagination { .bs-pagination {
position: absolute;
right: 0;
bottom: 16px;
padding: 0 10px 0px 16px; padding: 0 10px 0px 16px;
} }

8
data-room-ui/packages/assets/style/zTree/treePackUp.scss
Unescape Escape View File

@ -45,6 +45,7 @@
} }
.visible-pack-up { .visible-pack-up {
position: absolute !important;
right: 7px; right: 7px;
display: flex; display: flex;
height: 40px !important; height: 40px !important;
@ -96,14 +97,15 @@
user-select: none; user-select: none;
width: 15px; width: 15px;
z-index: 1; z-index: 1;
width: 14px; width: 16px;
display: flex; display: flex;
align-items: center;
height: auto; height: auto;
background-color: var(--bs-el-background-1); background-color: var(--bs-el-background-1);
height: 100%; height: 100%;
a { a {
align-self: center; position: unset !important;
display: block; display: block;
height: 100px; height: 100px;
line-height: 0px; line-height: 0px;
@ -134,5 +136,5 @@
.right-box { .right-box {
width: 75%; width: 75%;
// margin-left: 1px; margin-left: 16px;
} }

1
data-room-ui/packages/assets/style/zTree/zTree.scss
Unescape Escape View File

@ -1,5 +1,6 @@
.tree-box { .tree-box {
// background-color: ;
padding: 0 18px 10px 0; padding: 0 18px 10px 0;
} }

Write Preview
Loading…
Cancel
Save