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
0484c6e355
commit
440143a158
3 changed files with 263 additions and 52 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. 127
      src/views/dashboard/PanelGroup.vue
  2. 183
      src/views/home.vue
  3. 5
      src/views/storeManage/deviceManage/module/deviceDetail.vue

127
src/views/dashboard/PanelGroup.vue
View File

@ -7,10 +7,10 @@
</div>
<div class="card-panel-description">
<div class="card-panel-text">
New Visits
</div>
<count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" />
</div>
档案总量
</div>
</div>
</el-col>
<el-col class="card-panel-col">
@ -20,10 +20,10 @@
</div>
<div class="card-panel-description">
<div class="card-panel-text">
Messages
</div>
<count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" />
</div>
档案盒总量
</div>
</div>
</el-col>
<el-col class="card-panel-col">
@ -33,10 +33,10 @@
</div>
<div class="card-panel-description">
<div class="card-panel-text">
Purchases
</div>
<count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" />
</div>
全部设备
</div>
</div>
</el-col>
<el-col class="card-panel-col">
@ -46,10 +46,10 @@
</div>
<div class="card-panel-description">
<div class="card-panel-text">
Shoppings
</div>
<count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
</div>
在线设备
</div>
</div>
</el-col>
<el-col class="card-panel-col">
@ -59,10 +59,10 @@
</div>
<div class="card-panel-description">
<div class="card-panel-text">
Shoppings
</div>
<count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
</div>
离线设备
</div>
</div>
</el-col>
</el-row>
@ -87,24 +87,59 @@ export default {
.panel-group {
.card-panel-col {
margin-bottom: 32px;
margin-bottom: 20px;
}
.card-panel {
height: 100px;
// height: 108px;
// cursor: pointer;
font-size: 12px;
font-size: 15px;
position: relative;
overflow: hidden;
color: #666;
// background: #fff;
background: linear-gradient(180deg, rgba(51,159,210,0.5000) 0%, rgba(56,158,225,0) 100%);
border-top: 2px #21AAE1 solid;
opacity: 0.86;
// box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
// border-color: rgba(0, 0, 0, .05);
&.danganzongliang {
color: #21AAE1;
background: linear-gradient(180deg, rgba(51,159,210,0.5000) 0%, rgba(56,158,225,0) 100%);
border-top: 2px #21AAE1 solid;
& span.card-panel-num{
background: linear-gradient(180deg, #FFFFFF 0%, #21AAE1 100%);
}
}
&.danganhezongliang {
color: #793CBA;
background: linear-gradient(180deg, rgba(121,60,186,0.5000) 0%, rgba(121,60,186,0) 100%);
border-top: 2px #793CBA solid;
& span.card-panel-num{
background: linear-gradient(180deg, #FFFFFF 0%, #793CBA 100%)
}
}
&.quanbushebei {
color: #008E81;
background: linear-gradient(180deg, rgba(0,142,129,0.5000) 0%, rgba(0,142,129,0) 100%);
border-top: 2px #008E81 solid;
& span.card-panel-num{
background: linear-gradient(180deg, #FFFFFF 0%, #008E81 100%);
}
}
&.zaixianshebei {
color: #C4C859;
background: linear-gradient(180deg, rgba(196,200,89,0.5000) 0%, rgba(196,200,89,0) 100%);
border-top: 2px #C4C859 solid;
& span.card-panel-num{
background: linear-gradient(180deg, #FFFFFF 0%, #BFC458 100%);
}
}
&.lixianshebei {
color: #F65164;
background: linear-gradient(180deg, rgba(246,81,100,0.5000) 0%, rgba(247,80,100,0) 100%);
border-top: 2px #F65164 solid;
& span.card-panel-num{
background: linear-gradient(180deg, #FFFFFF 0%, #F55164 100%);
}
}
// &:hover {
// .card-panel-icon-wrapper {
// color: #fff;
@ -127,51 +162,61 @@ export default {
// }
// }
.icon-danganzongliang {
color: #21AAE1;
}
// .icon-danganzongliang {
// color: #21AAE1;
// }
.icon-danganhezongliang {
color: #36a3f7;
}
// .icon-danganhezongliang {
// color: #793CBA;
// }
.icon-money {
color: #f4516c;
}
// .icon-quanbushebei {
// color: #008E81;
// }
.icon-shopping {
color: #34bfa3
}
// .icon-zaixianshebei {
// color: #C4C859
// }
// .icon-lixianshebei {
// color: #F65164
// }
.card-panel-icon-wrapper {
float: left;
margin: 14px 0 0 14px;
padding: 16px;
margin: 0 10px 0 12px;
padding: 20px;
transition: all 0.38s ease-out;
border-radius: 6px;
}
.card-panel-icon {
float: left;
font-size: 48px;
font-size: 60px;
}
.card-panel-description {
float: right;
font-weight: bold;
margin: 26px;
// float: right;
// font-weight: bold;
margin: 19px;
margin-left: 0px;
.card-panel-text {
line-height: 18px;
line-height: 30px;
color: rgba(0, 0, 0, 0.45);
font-size: 16px;
margin-bottom: 12px;
font-size: 28px;
margin-bottom: 11px;
& span{
// background: linear-gradient(180deg, #FFFFFF 0%, #21AAE1 100%);
-webkit-background-clip: text;
color: transparent;
font-weight: bold;
}
.card-panel-num {
font-size: 20px;
}
// .card-panel-num {
// font-size: 20px;
// }
}
}
}

183
src/views/home.vue
View File

@ -3,10 +3,78 @@
<div class="dashboard-editor-container">
<!-- <github-corner class="github-corner" /> -->
<panel-group @handleSetLineChartData="handleSetLineChartData" />
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
<!-- <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
<line-chart :chart-data="lineChartData" />
</el-row> -->
<el-row :gutter="20">
<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-select slot="prepend" placeholder="全目录">
<el-option label="餐厅名" value="1" />
<el-option label="订单号" value="2" />
<el-option label="用户电话" value="3" />
</el-select>
<el-button slot="append" icon="el-icon-search" />
</el-input>
</div>
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="8">
<!-- <div class="chart-wrapper">
<pie-chart />
</div> -->
<div class="container-left" style="height: 158px;margin: 0">
<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>
</h3>
<div class="warehouse-tab">
<ul class="warehouse-nav">
<li @click="changeActiveTab(0)">
<span />
<p>全景图</p>
</li>
<li @click="changeActiveTab(1)">
<span />
<p>档案库</p>
</li>
<li @click="changeActiveTab(2)">
<span />
<p>整理室</p>
</li>
<li @click="changeActiveTab(3)">
<span />
<p>阅览室</p>
</li>
</ul>
</div>
</div>
</el-col>
</el-row>
<el-row :gutter="32">
<el-row :gutter="20">
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<radar-chart />
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<pie-chart />
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<bar-chart />
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<radar-chart />
@ -30,7 +98,7 @@
<script>
// import GithubCorner from '@/components/GithubCorner'
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
// import LineChart from './dashboard/LineChart'
import RadarChart from '@/components/Echarts/RadarChart'
import PieChart from '@/components/Echarts/PieChart'
import BarChart from '@/components/Echarts/BarChart'
@ -59,7 +127,7 @@ export default {
components: {
// GithubCorner,
PanelGroup,
LineChart,
// LineChart,
RadarChart,
PieChart,
BarChart
@ -78,17 +146,18 @@ export default {
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import '~@/assets/styles/lend-manage.scss';
.dashboard-editor-container {
padding: 20px;
background-color: #031435;
position: relative;
.github-corner {
position: absolute;
top: 0;
border: 0;
right: 0;
}
// .github-corner {
// position: absolute;
// top: 0;
// border: 0;
// right: 0;
// }
.chart-wrapper {
background: #fff;
@ -96,10 +165,102 @@ export default {
margin-bottom: 32px;
}
}
@media (max-width:1024px) {
.chart-wrapper {
padding: 8px;
}
}
.title-arrow {
width: 100%;
&:before{
left: calc(50% - 100px)
}
&:after{
right: calc(50% - 100px)
}
}
.warehouse-tab{
color: #fff;
.warehouse-nav{
display: flex;
justify-content: space-around;
position: absolute;
bottom: 20px;
// left: 20px;
z-index: 11;
// width: calc(100vw - 545px);
width: 100%;
height: 90px;
min-height: 90px;
padding: 0;
li{
display: flex;
flex-direction: column;
align-items: center;
flex-wrap: nowrap;
// align-items: center;
align-content: center;
justify-content: center;
// width: 25%;
height: 90px;
// line-height: 90px;
text-align: right;
// padding-right: 20px;
// margin-right: 20px;
font-size: 14px;
position: relative;
&:hover{
cursor: pointer;
}
// background: url('~@/assets/images/warehouse_tab_bg.png') no-repeat;
// background-size: 100% 100%;
span{
width: 72px;
height: 52px;
margin-bottom: 7px;
// position: absolute;
// left: 60px;
// top: 20px;
}
p{
// flex: 1;
text-align: left;
}
&: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(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;
}
}
// .active-nav{
// color: #fff;
// background: url('~@/assets/images/warehouse_tab_active.png') no-repeat;
// background-size: 100% 100%;
// }
}
}
.search-area {
height: 158px;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
& .search-input{
width: 796px;
}
// & .el-select .el-input {
// width: 130px;
// }
// & .input-with-select .el-input-group__prepend {
// background-color: #fff;
// }
}
</style>

5
src/views/storeManage/deviceManage/module/deviceDetail.vue
View File

@ -394,6 +394,11 @@ export default {
// }
// }
// await
crudDevice.getDeviceById().then((data) => {
crud.resetForm(JSON.parse(JSON.stringify(data)))
crud.status.edit = CRUD.STATUS.PREPARED
crud.getDataStatus(crud.getDataId(data)).edit = CRUD.STATUS.PREPARED
})
form.supplier = form.supplierId.id
this.selectedDeviceType = form.deviceTypeId.name
// crud.status.edit = CRUD.STATUS.PREPARED

Write Preview
Loading…
Cancel
Save