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

大屏修改

master
x_ying 3 years ago
parent
56deaad885
commit
ace15c58f7
2 changed files with 195 additions and 2 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 46
      src/assets/styles/font-some.css
  2. 151
      src/views/environmentalScreen/index.vue

46
src/assets/styles/font-some.css
View File

@ -0,0 +1,46 @@
.chartNum{
display: flex;
justify-content: center;
margin-top: 0.25rem;
}
.box-items {
position: relative;
display: flex;
height: 0.6rem;
text-align: center;
}
/*滚动数字设置*/
.number-item {
display: flex;
justify-content: center;
text-align: center;
width: 0.45rem;
height: 0.6rem;
line-height: 0.6rem;
margin-right: 0.125rem;
border: 1px solid #2C75E0;
}
.number-item span{
position: relative;
display: inline-block;
width: 100%;
height: 100%;
writing-mode: vertical-rl;
text-orientation: upright;
overflow: hidden;
}
.number-item span i{
font-style: normal;
position: absolute;
top: 0.1rem;
left: 50%;
font-size: 0.325rem;
font-weight: bold;
color: #1AC9FF;
transform: translate(-50%,0);
transition: transform 1s ease-in-out;
letter-spacing: 10px;
}
.number-item:last-child {
margin-right: 0;
}

151
src/views/environmentalScreen/index.vue
View File

@ -108,7 +108,7 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="env-item container-wrap device-container">
<!-- <div class="env-item container-wrap device-container">
<span class="right-top-line" /> <span class="right-top-line" />
<span class="left-bottom-line" /> <span class="left-bottom-line" />
<h3><i class="iconfont icon-shebeizhuangtai" />设备状态</h3> <h3><i class="iconfont icon-shebeizhuangtai" />设备状态</h3>
@ -172,6 +172,90 @@
</div> </div>
</li> </li>
</ul> </ul>
</div> -->
<div class="middle-bottom">
<!-- <span class="right-top-line" />
<span class="left-bottom-line" /> -->
<div class="container-wrap middle-bottom-l">
<span class="right-top-line" />
<span class="left-bottom-line" />
<ul>
<li>
<div class="row-item">
<div class="svg-box">
<svg-icon icon-class="danganzongliang" class-name="card-panel-icon" />
</div>
<span>馆藏总量</span>
</div>
<span class="row-num">12345</span>
</li>
<li>
<div class="row-item">
<div class="svg-box">
<svg-icon icon-class="danganzongliang" class-name="card-panel-icon" />
</div>
<span>在借数量</span>
</div>
<span class="row-num">12345</span>
</li>
<li>
<div class="row-item">
<div class="svg-box">
<svg-icon icon-class="danganhezongliang" class-name="card-panel-icon" />
</div>
<span>在库数量</span>
</div>
<span class="row-num">12345</span>
</li>
</ul>
<ul>
<li>
<div class="row-item">
<div class="svg-box">
<svg-icon icon-class="quanbushebei" class-name="card-panel-icon" />
</div>
<span>全部设备</span>
</div>
<span class="row-num">12345</span>
</li>
<li>
<div class="row-item">
<div class="svg-box">
<svg-icon icon-class="zaixianshebei" class-name="card-panel-icon" />
</div>
<span>在线设备</span>
</div>
<span class="row-num">12345</span>
</li>
<li>
<div class="row-item">
<div class="svg-box">
<svg-icon icon-class="lixianshebei" class-name="card-panel-icon" />
</div>
<span>离线设备</span>
</div>
<span class="row-num">12345</span>
</li>
</ul>
</div>
<div class="container-wrap middle-bottom-r">
<span class="right-top-line" />
<span class="left-bottom-line" />
<ul>
<li>
<span>日借阅量</span>
<div class="chartNum">
<div id="TNum" class="box-items">
<li class="number-item"><span><i ref="numberItem" class="item">0123456789</i></span></li>
</div>
</div>
</li>
<li><span>日归还量</span></li>
<li><span>月借阅量</span></li>
<li><span>月归还量</span></li>
</ul>
</div>
</div> </div>
</div> </div>
<div class="env-main-right"> <div class="env-main-right">
@ -471,6 +555,8 @@ export default {
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>
@import "~@/assets/styles/lend-manage.scss"; @import "~@/assets/styles/lend-manage.scss";
@import "~@/assets/styles/font-some.css";
.env-container { .env-container {
width: 100%; width: 100%;
height: calc(100vh); height: calc(100vh);
@ -749,7 +835,7 @@ export default {
.env-3d { .env-3d {
position: relative; position: relative;
width: 100%; width: 100%;
height: calc(100% - (100% / 3) - 8px);
height: calc(100% - (100% / 4) - 8px);
margin-bottom: 20px; margin-bottom: 20px;
background: url("~@/assets/images/largeScreen/bg.png") no-repeat center -130px; background: url("~@/assets/images/largeScreen/bg.png") no-repeat center -130px;
// background-size: 100% 100%; // background-size: 100% 100%;
@ -777,4 +863,65 @@ export default {
} }
} }
} }
.middle-bottom{
display: flex;
color: #339CFF ;
font-size: 14px;
justify-content: space-between;
height: calc(100% - 198px);
.middle-bottom-l{
display: flex;
justify-content: space-between;
width: 60%;
ul{
width: 59%;
padding: 25px 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
li{
height: calc(100% / 3 - 14px);
background: linear-gradient(360deg, rgba(51,156,255,0.24) 0%, rgba(56,158,225,0) 70%, rgba(56,158,225,0) 100%);
display: flex;
align-items: center;
justify-content: space-between;
.row-item{
display: flex;
align-items: center;
.svg-box{
margin-right: 10px;
.card-panel-icon{
font-size: 24px;
}
}
}
.row-num{
font-size: 18px;
color: #fff;
}
// padding: 10px 0;
}
}
}
.middle-bottom-r{
width: 38%;
ul{
width: 100%;
height: 100%;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
li{
height: 20%;
display: flex;
align-items: center;
justify-content: space-between;
// padding: 10px 0;
}
}
}
}
</style> </style>
Write Preview
Loading…
Cancel
Save