liu_li
/
yxk-storeroom-system
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

首页CSS修改

master
z_yu 3 years ago
parent
abbe1b208c
commit
d6f2a81749
1 changed files with 192 additions and 72 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 232
      src/views/home.vue

232
src/views/home.vue
View File

@ -6,14 +6,14 @@
<!-- <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
<line-chart :chart-data="lineChartData" />
</el-row> -->
<el-row :gutter="20" style="margin-bottom:20px;height: 158px;">
<el-row :gutter="20" style="margin-bottom:20px;height: 152px;">
<el-col :xs="24" :sm="24" :lg="16">
<div class="container-left search-area">
<span class="right-top-line" />
<span class="left-bottom-line" />
<div class="search-input">
<!-- v-model="input3" v-model="select"-->
<el-input placeholder="请输入内容" class="input-with-select">
<el-input placeholder="2022，办公室" class="input-with-select">
<el-select slot="prepend" placeholder="全目录">
<el-option label="餐厅名" value="1" />
<el-option label="订单号" value="2" />
@ -32,7 +32,9 @@
<span class="right-top-line" />
<span class="left-bottom-line" />
<h3 class=" table-title">
<p class="title-arrow"><svg-icon icon-class="a-3Dkufang" class-name="warehouse-svg" />3D库房</p>
<p class="title-arrow">
<svg-icon icon-class="a-3Dkufang" class-name="warehouse-svg" />3D库房
</p>
</h3>
<div class="warehouse-tab">
<ul class="warehouse-nav">
@ -64,8 +66,39 @@
<span class="right-top-line" />
<span class="left-bottom-line" />
<h3 class="table-title">
<p class="title-arrow"><svg-icon icon-class="tongzhigonggao" class-name="warehouse-svg" />待办事项</p>
<p class="title-arrow">
<svg-icon icon-class="tongzhigonggao" class-name="warehouse-svg" />待办事项
</p>
</h3>
<div style="height: calc(100% - 40px);overflow-y: auto;overflow-x: hidden;">
<ul class="todo-list">
<li>
<!-- CCCCCCC，请及时处理 -->
<p>温馨提示：XX已提交了待借申请，请及时处理，请及时处理，请及时处理</p>
<span>2022-5-23 13:30</span>
</li>
<li>
<p>温馨提示：XX已提交了待借申请，请及时处理</p>
<span>2022-5-23 13:30</span>
</li>
<li>
<p>温馨提示：XX已提交了待借申请，请及时处理</p>
<span>2022-5-23 13:30</span>
</li>
<li>
<p>温馨提示：XX已提交了待借申请，请及时处理</p>
<span>2022-5-23 13:30</span>
</li>
<li>
<p>温馨提示：XX已提交了待借申请，请及时处理</p>
<span>2022-5-23 13:30</span>
</li>
<li>
<p>温馨提示：XX已提交了待借申请，请及时处理</p>
<span>2022-5-23 13:30</span>
</li>
</ul>
</div>
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="8">
@ -74,16 +107,11 @@
<span class="right-top-line" />
<span class="left-bottom-line" />
<h3 class="table-title">
<p class="title-arrow"><svg-icon icon-class="menjin" class-name="warehouse-svg" />门禁记录</p>
<p class="title-arrow">
<svg-icon icon-class="menjin" class-name="warehouse-svg" />门禁记录
</p>
</h3>
<el-table
ref="table2"
style="min-width: 100%;"
height="100%"
:data="tableData"
class="warehose-el-table"
:row-class-name="rowBgColor"
>
<el-table ref="table2" style="min-width: 100%;" height="100%" :data="tableData" class="warehose-el-table" :row-class-name="rowBgColor">
<el-table-column prop="time" label="时间" align="center" min-width="60" />
<el-table-column prop="warehouse" label="库房" align="center" min-width="60" />
<el-table-column prop="warning" label="警情" align="center" :show-overflow-tooltip="true" min-width="85" />
@ -96,16 +124,11 @@
<span class="right-top-line" />
<span class="left-bottom-line" />
<h3 class="table-title">
<p class="title-arrow"><svg-icon icon-class="alerm" class-name="warehouse-svg" />报警记录</p>
<p class="title-arrow">
<svg-icon icon-class="alerm" class-name="warehouse-svg" />报警记录
</p>
</h3>
<el-table
ref="table"
style="min-width: 100%;"
height="100%"
:data="tableData"
class="warehose-el-table"
:row-class-name="rowBgColor"
>
<el-table ref="table" style="min-width: 100%;" height="100%" :data="tableData" class="warehose-el-table" :row-class-name="rowBgColor">
<el-table-column prop="time" label="时间" align="center" min-width="60" />
<el-table-column prop="warehouse" label="库房" align="center" min-width="60" />
<el-table-column prop="warning" label="警情" align="center" :show-overflow-tooltip="true" min-width="85" />
@ -113,10 +136,18 @@
</div>
</el-col>
</el-row>
<el-row :gutter="20" style="height:276px;">
<el-row :gutter="20" style="height:302px;">
<el-col :xs="24" :sm="24" :lg="8">
<!-- 档案借阅 -->
<div class="container-wrap">
<span class="right-top-line" />
<span class="left-bottom-line" />
<h3 class="table-title">
<p class="title-arrow">档案借阅</p>
</h3>
<div class="chart-wrapper">
<radar-chart />
<lend-across :lend-data="lendData" />
</div>
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="8">
@ -128,13 +159,21 @@
<p class="title-arrow">档案类别</p>
</h3>
<div class="chart-wrapper">
<pie-chart :width="'100%'" :height="'100%'" />
<cate-pie :cate-data="cateData" />
</div>
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="8">
<!-- 档案类别 -->
<div class="container-wrap">
<span class="right-top-line" />
<span class="left-bottom-line" />
<h3 class="table-title">
<p class="title-arrow">档案类别</p>
</h3>
<div class="chart-wrapper">
<pie-chart />
<type-pie :type-data="typeData" />
</div>
</div>
</el-col>
</el-row>
@ -146,9 +185,12 @@
// import GithubCorner from '@/components/GithubCorner'
import PanelGroup from './dashboard/PanelGroup'
// import LineChart from './dashboard/LineChart'
import RadarChart from '@/components/Echarts/RadarChart'
import PieChart from '@/components/Echarts/PieChart'
// import RadarChart from '@/components/Echarts/RadarChart'
// import PieChart from '@/components/Echarts/PieChart'
// import BarChart from '@/components/Echarts/BarChart'
import lendAcross from '@/views/components/echarts/lendAcross.vue'
import catePie from '@/views/components/echarts/catePie.vue'
import typePie from '@/views/components/echarts/typePie.vue'
import data1 from './data1.json'
const lineChartData = {
@ -176,14 +218,17 @@ export default {
// GithubCorner,
PanelGroup,
// LineChart,
RadarChart,
PieChart
// RadarChart,
// PieChart
// ,
// BarChart
lendAcross, catePie, typePie
},
data() {
return {
lineChartData: lineChartData.newVisitis
lendData: [18203, 23489, 29034, 104970],
cateData: [1000, 700],
typeData: [1110, 2000, 800, 600, 900]
}
},
created() {
@ -201,8 +246,8 @@ export default {
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import '~@/assets/styles/lend-manage.scss';
.dashboard-editor-container {
@import "~@/assets/styles/lend-manage.scss";
.dashboard-editor-container {
padding: 20px;
background-color: #031435;
position: relative;
@ -215,16 +260,16 @@ export default {
// }
.chart-wrapper {
background: #fff;
// background: #fff;
padding: 16px 16px 0;
margin-bottom: 32px;
}
}
@media (max-width:1024px) {
}
@media (max-width: 1024px) {
.chart-wrapper {
padding: 8px;
}
}
}
// .title-arrow {
// width: 100%;
// &:before{
@ -234,9 +279,9 @@ export default {
// right: calc(50% - 100px)
// }
// }
.warehouse-tab{
.warehouse-tab {
color: #fff;
.warehouse-nav{
.warehouse-nav {
display: flex;
justify-content: space-around;
position: absolute;
@ -248,7 +293,7 @@ export default {
// height: 90px;
// min-height: 90px;
padding: 0;
li{
li {
display: flex;
flex-direction: column;
align-items: center;
@ -264,12 +309,12 @@ export default {
// margin-right: 20px;
font-size: 14px;
position: relative;
&:hover{
&:hover {
cursor: pointer;
}
// background: url('~@/assets/images/warehouse_tab_bg.png') no-repeat;
// background-size: 100% 100%;
span{
span {
width: 72px;
height: 52px;
margin-bottom: 7px;
@ -277,21 +322,21 @@ export default {
// left: 60px;
// top: 20px;
}
p{
p {
// flex: 1;
text-align: left;
}
&:first-child span{
background: url('~@/assets/images/tab_fullview_logo.png') no-repeat;
&:first-child span {
background: url("~@/assets/images/tab_fullview_logo.png") no-repeat;
}
&:nth-child(2) span{
background: url('~@/assets/images/tab_archives_logo.png') no-repeat;
&:nth-child(2) span {
background: url("~@/assets/images/tab_archives_logo.png") no-repeat;
}
&:nth-child(3) span{
background: url('~@/assets/images/tab_collate_logo.png') no-repeat;
&:nth-child(3) span {
background: url("~@/assets/images/tab_collate_logo.png") no-repeat;
}
&:nth-child(4) span{
background: url('~@/assets/images/tab_read_logo.png') no-repeat;
&:nth-child(4) span {
background: url("~@/assets/images/tab_read_logo.png") no-repeat;
}
}
// .active-nav{
@ -307,23 +352,98 @@ export default {
display: flex;
align-items: center;
justify-content: center;
& .search-input{
& .search-input {
width: 796px;
::v-deep.el-input-group {
height: 42px;
& > input {
height: 42px;
border: 1px solid #339cff;
background-color: #021941;
}
}
// border: 1px solid #339cff;
// background-color: #021941;
// height: 42px;
// line-height: 42px;
// color: #fff;
& ::v-deep.el-input-group__prepend {
width: 125px;
background-color: #339cff;
border: 1px solid #339cff;
border-radius: 34px;
border-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
.el-input__inner {
text-align: center;
}
}
& ::v-deep.el-input-group__append {
width: 72px;
left: -20px;
text-align: center;
background-color: #339cff;
border: 1px solid #339cff;
border-radius: 34px;
& i {
font-size: 25px;
}
}
& .el-select .el-input {
width: 130px;
}
& ::v-deep.input-with-select ::v-deep.el-input-group__prepend {
background-color: #fff;
}
}
}
.el-col {
height: 100%;
}
.container-left, .container-right, .container-wrap, .el-card, .header-container-wrap{
.container-left,
.container-right,
.container-wrap,
.el-card,
.header-container-wrap {
min-height: 100%;
}
.warehose-el-table ::v-deep.el-table__header-wrapper{
box-shadow: inset 0px 0px 6px 1px #339CFF;
.warehose-el-table ::v-deep.el-table__header-wrapper {
box-shadow: inset 0px 0px 6px 1px #339cff;
background: none !important;
}
.container-wrap{
.container-wrap {
min-height: auto;
height: 100%;
overflow: hidden;
}
.todo-list {
padding: 0 20px;
& li {
background: #02255f;
box-shadow: inset 0px 0px 6px 1px #339cff;
border-radius: 26px 26px 26px 26px;
opacity: 1;
margin-bottom: 10px;
font-size: 13px;
color: #ffffff;
line-height: 42px;
height: 42px;
& p {
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
display: inline-block;
padding-left: 10px;
width: calc(100% - 112px);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
word-break: break-all;
}
& span {
float: right;
padding-right: 10px;
}
}
}
</style>
Write Preview
Loading…
Cancel
Save