Browse Source

样式修改

master
xuhuajiao 3 years ago
parent
commit
9be92d1f50
  1. 31
      src/assets/styles/index.scss
  2. 3
      src/assets/styles/lend-manage.scss
  3. 9
      src/views/archivesManage/archivesList/archivesAnjuan/index.vue
  4. 7
      src/views/archivesManage/archivesList/archivesJuannei/index.vue
  5. 9
      src/views/archivesManage/archivesList/archivesProject/index.vue
  6. 90
      src/views/storeManage/warehouse3D/archivesStorage/index.vue
  7. 2
      src/views/storeManage/warehouse3D/fullView/index.vue
  8. 56
      src/views/storeManage/warehouse3D/index.vue
  9. 2
      src/views/storeManage/warehouse3DConfig/index.vue

31
src/assets/styles/index.scss

@ -253,5 +253,34 @@ ul{
} }
} }
} }
// 档案管理
.tree-scroll{
height: calc(100vh - 480px) !important;
}
// 库房
.warehouse-left{
.msg-list{
li{
.msg-list-svg{
font-size: 26px !important;
margin-left: 8px !important;
}
.msg-list-unit{
font-size: 10px !important;
}
.msg-list-num{
font-size: 20px !important;
top: 20px !important;
}
&.msg-pm{
.msg-list-svg{
font-size: 32px !important;
}
.msg-list-unit{
left: -8px !important;
}
}
}
}
}
} }

3
src/assets/styles/lend-manage.scss

@ -70,11 +70,14 @@ color:#F65163;
} }
.warehouse{ .warehouse{
display: flex; display: flex;
max-height: calc(100vh - 184px);
overflow: hidden;
.warehouse-left{ .warehouse-left{
flex: 1; flex: 1;
} }
.warehouse-right{ .warehouse-right{
width: 458px; width: 458px;
max-height: calc(100vh - 192px);
} }
} }
::v-deep .el-table__header-wrapper{ ::v-deep .el-table__header-wrapper{

9
src/views/archivesManage/archivesList/archivesAnjuan/index.vue

@ -25,8 +25,8 @@
<i slot="prefix" class="iconfont icon-zhuangtai-fanbai" /> <i slot="prefix" class="iconfont icon-zhuangtai-fanbai" />
<el-option v-for="item in stateOptions" :key="item.key" :label="item.label" :value="item.key" /> <el-option v-for="item in stateOptions" :key="item.key" :label="item.label" :value="item.key" />
</el-select> </el-select>
<el-input v-model="anjuanQuery[anjuanInputSelect]" clearable size="small" placeholder="请输入关键词" style="width: 200px;" class="input-prepend filter-item" @clear="getTableList()" @keyup.enter.native="getTableList">
<el-select slot="prepend" v-model="anjuanInputSelect" style="width: 80px" @change="querySelect(anjuanInputSelect)">
<el-input v-model="anjuanQuery[anjuanInputSelect]" clearable size="small" placeholder="请输入关键词" style="width: 220px;" class="input-prepend filter-item" @clear="getTableList()" @keyup.enter.native="getTableList">
<el-select slot="prepend" v-model="anjuanInputSelect" style="width: 112px" @change="querySelect(anjuanInputSelect)">
<el-option <el-option
v-for="item in queryOption" v-for="item in queryOption"
:key="item.value" :key="item.value"
@ -371,4 +371,9 @@ export default {
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>
@import "~@/assets/styles/archives-manage.scss"; @import "~@/assets/styles/archives-manage.scss";
::v-deep.input-prepend{
.el-input__inner {
padding-left: 106px;
}
}
</style> </style>

7
src/views/archivesManage/archivesList/archivesJuannei/index.vue

@ -22,7 +22,7 @@
<div class="head-search"> <div class="head-search">
<!-- @keyup.enter.native="crud.toQuery" --> <!-- @keyup.enter.native="crud.toQuery" -->
<el-input v-model="juanneiQuery[juanneiInputSelect]" clearable size="small" placeholder="请输入关键词" style="width: 200px;" class="input-prepend filter-item" @clear="getTableList()" @keyup.enter.native="getTableList"> <el-input v-model="juanneiQuery[juanneiInputSelect]" clearable size="small" placeholder="请输入关键词" style="width: 200px;" class="input-prepend filter-item" @clear="getTableList()" @keyup.enter.native="getTableList">
<el-select slot="prepend" v-model="juanneiInputSelect" style="width: 80px" @change="querySelect(juanneiInputSelect)">
<el-select slot="prepend" v-model="juanneiInputSelect" style="width: 85px" @change="querySelect(juanneiInputSelect)">
<el-option <el-option
v-for="item in queryOption" v-for="item in queryOption"
:key="item.value" :key="item.value"
@ -266,4 +266,9 @@ export default {
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>
@import "~@/assets/styles/archives-manage.scss"; @import "~@/assets/styles/archives-manage.scss";
::v-deep.input-prepend{
.el-input__inner {
padding-left: 85px;
}
}
</style> </style>

9
src/views/archivesManage/archivesList/archivesProject/index.vue

@ -17,8 +17,8 @@
</div> </div>
<div class="head-search"> <div class="head-search">
<!-- @keyup.enter.native="crud.toQuery" --> <!-- @keyup.enter.native="crud.toQuery" -->
<el-input v-model="projectQuery[projectInputSelect]" clearable size="small" placeholder="请输入关键词" style="width: 200px;" class="input-prepend filter-item" @clear="getTableList()" @keyup.enter.native="getTableList">
<el-select slot="prepend" v-model="projectInputSelect" style="width: 80px" @change="querySelect(projectInputSelect)">
<el-input v-model="projectQuery[projectInputSelect]" clearable size="small" placeholder="请输入关键词" style="width: 206px;" class="input-prepend filter-item" @clear="getTableList()" @keyup.enter.native="getTableList">
<el-select slot="prepend" v-model="projectInputSelect" style="width: 100px" @change="querySelect(projectInputSelect)">
<el-option <el-option
v-for="item in queryOption" v-for="item in queryOption"
:key="item.value" :key="item.value"
@ -220,5 +220,10 @@ export default {
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>
@import "~@/assets/styles/archives-manage.scss"; @import "~@/assets/styles/archives-manage.scss";
::v-deep.input-prepend{
.el-input__inner {
padding-left: 94px;
}
}
</style> </style>

90
src/views/storeManage/warehouse3D/archivesStorage/index.vue

@ -3,7 +3,6 @@
<!-- <h1>全景图</h1> --> <!-- <h1>全景图</h1> -->
<div class="warehouse-left"> <div class="warehouse-left">
<div class="left-3d"> <div class="left-3d">
<!-- <button @click="invokeHtmlMethod">调用html种方法</button> -->
<iframe <iframe
id="myIframe" id="myIframe"
ref="myIframe" ref="myIframe"
@ -16,33 +15,46 @@
<ul class="msg-list"> <ul class="msg-list">
<li> <li>
<svg-icon icon-class="temperature" class-name="msg-list-svg" /> <svg-icon icon-class="temperature" class-name="msg-list-svg" />
<span class="msg-list-num">60</span>
<p class="msg-list-unit">温度</p>
<div class="msg-txt">
<span class="msg-list-num">60</span>
<p class="msg-list-unit">温度</p>
</div>
</li> </li>
<li class="li-warn"> <li class="li-warn">
<svg-icon icon-class="shidu" class-name="msg-list-svg" /> <svg-icon icon-class="shidu" class-name="msg-list-svg" />
<span class="msg-list-num">60</span>
<p class="msg-list-unit">湿度%</p>
<div class="msg-txt">
<span class="msg-list-num">60</span>
<p class="msg-list-unit">湿度%</p>
</div>
</li> </li>
<li> <li>
<svg-icon icon-class="co2" class-name="msg-list-svg" /> <svg-icon icon-class="co2" class-name="msg-list-svg" />
<span class="msg-list-num">60</span>
<p class="msg-list-unit">CO2ppm</p>
<div class="msg-txt">
<span class="msg-list-num">60</span>
<p class="msg-list-unit">CO2ppm</p>
</div>
</li> </li>
<li> <li>
<svg-icon icon-class="voc" class-name="msg-list-svg" /> <svg-icon icon-class="voc" class-name="msg-list-svg" />
<span class="msg-list-num">60</span>
<p class="msg-list-unit">VOCmg/m³</p>
<div class="msg-txt">
<span class="msg-list-num">60</span>
<p class="msg-list-unit">VOCmg/m³</p>
</div>
</li> </li>
<li>
<svg-icon icon-class="pm2.5" class-name="msg-list-svg" style="font-size:46px;margin-left:25px;padding-bottom:10px" />
<span class="msg-list-num">60</span>
<p class="msg-list-unit">PM2.5ug/m³</p>
<li class="msg-pm">
<!-- style="font-size:46px;margin-left:25px;padding-bottom:10px" -->
<svg-icon icon-class="pm2.5" class-name="msg-list-svg" />
<div class="msg-txt">
<span class="msg-list-num">60</span>
<p class="msg-list-unit">PM2.5ug/m³</p>
</div>
</li> </li>
<li>
<svg-icon icon-class="pm10" class-name="msg-list-svg" style="font-size:46px;margin-left:25px;padding-bottom:10px" />
<span class="msg-list-num">60</span>
<p class="msg-list-unit">PM10ug/m³</p>
<li class="msg-pm">
<svg-icon icon-class="pm10" class-name="msg-list-svg" />
<div class="msg-txt">
<span class="msg-list-num">60</span>
<p class="msg-list-unit">PM10ug/m³</p>
</div>
</li> </li>
</ul> </ul>
</div> </div>
@ -59,7 +71,7 @@
<el-table <el-table
ref="table" ref="table"
style="min-width: 100%;" style="min-width: 100%;"
height="300px"
height="100%"
:data="tableData" :data="tableData"
class="warehose-el-table" class="warehose-el-table"
:row-class-name="rowBgColor" :row-class-name="rowBgColor"
@ -79,7 +91,7 @@
<el-table <el-table
ref="table" ref="table"
style="min-width: 100%;" style="min-width: 100%;"
height="calc(100vh - 620px)"
height="100%"
:data="tableData" :data="tableData"
class="warehose-el-table" class="warehose-el-table"
:row-class-name="rowBgColor" :row-class-name="rowBgColor"
@ -192,46 +204,62 @@ export default {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: calc(100vw - 800px);
li{ li{
flex: 1; flex: 1;
width: 165px;
display: flex;
flex-wrap: nowrap;
align-items: center;
align-content: center;
justify-content: center;
// width: calc(100%/6);
height: 80px; height: 80px;
margin-right: 20px; margin-right: 20px;
background: url('~@/assets/images/data_border_default.png') no-repeat; background: url('~@/assets/images/data_border_default.png') no-repeat;
background-size: 165px 80px;
background-size: 100% 100%;
position: relative; position: relative;
&.li-warn{ &.li-warn{
background: url('~@/assets/images/data_border_warn.png') no-repeat; background: url('~@/assets/images/data_border_warn.png') no-repeat;
background-size: 165px 80px;
background-size: 100% 100%;
} }
.msg-list-svg{ .msg-list-svg{
font-size: 36px; font-size: 36px;
display: inline-block; display: inline-block;
height: 80px; height: 80px;
line-height: 80px; line-height: 80px;
margin-left:30px ;
margin-left: 30px;
}
.msg-pm{
font-size: 46px;
}
.msg-txt{
position: relative;
flex: 1;
height: 80px;
text-align: center;
} }
.msg-list-unit{ .msg-list-unit{
position: absolute; position: absolute;
right: 10px;
bottom: 10px;
width: 90px;
text-align: center;
left: 0;
bottom: 12px;
width: 100%;
font-size: 14px; font-size: 14px;
} }
.msg-list-num{ .msg-list-num{
color: #fff; color: #fff;
font-size: 26px; font-size: 26px;
position: absolute; position: absolute;
right: 20px;
top: 20px;
width: 50px;
left: 0;
top: 14px;
width: 100%;
} }
} }
} }
} }
.container-wrap{ .container-wrap{
min-height: calc(100vh - 573px)
min-height: auto;
height: calc(100%/2 - 10px);
overflow: hidden;
} }
</style> </style>

2
src/views/storeManage/warehouse3D/fullView/index.vue

@ -24,7 +24,7 @@
<el-table <el-table
ref="table" ref="table"
style="min-width: 100%;" style="min-width: 100%;"
height="calc(100vh - 235px)"
height="100%"
:data="tableData" :data="tableData"
class="warehose-el-table" class="warehose-el-table"
:row-class-name="rowBgColor" :row-class-name="rowBgColor"

56
src/views/storeManage/warehouse3D/index.vue

@ -2,10 +2,22 @@
<div class="warehouse"> <div class="warehouse">
<div class="warehouse-tab"> <div class="warehouse-tab">
<ul class="warehouse-nav"> <ul class="warehouse-nav">
<li :class="{ 'active-nav': activeIndex == 0 }" @click="changeActiveTab(0)">全景图</li>
<li :class="{ 'active-nav': activeIndex == 1 }" @click="changeActiveTab(1)">档案库</li>
<li :class="{ 'active-nav': activeIndex == 2 }" @click="changeActiveTab(2)">整理室</li>
<li :class="{ 'active-nav': activeIndex == 3 }" @click="changeActiveTab(3)">阅览室</li>
<li :class="{ 'active-nav': activeIndex == 0 }" @click="changeActiveTab(0)">
<span />
<p>全景图</p>
</li>
<li :class="{ 'active-nav': activeIndex == 1 }" @click="changeActiveTab(1)">
<span />
<p>档案库</p>
</li>
<li :class="{ 'active-nav': activeIndex == 2 }" @click="changeActiveTab(2)">
<span />
<p>整理室</p>
</li>
<li :class="{ 'active-nav': activeIndex == 3 }" @click="changeActiveTab(3)">
<span />
<p>阅览室</p>
</li>
</ul> </ul>
<component :is="comName" /> <component :is="comName" />
</div> </div>
@ -91,47 +103,59 @@ export default {
.warehouse-nav{ .warehouse-nav{
display: flex; display: flex;
position: absolute; position: absolute;
bottom: 17px;
bottom: 20px;
left: 20px; left: 20px;
z-index: 11; z-index: 11;
// width: calc(100vw - 545px);
width: calc(100vw - 800px);
height: 90px; height: 90px;
min-height: 90px; min-height: 90px;
padding: 0; padding: 0;
li{ li{
width: 260px;
display: flex;
flex-wrap: nowrap;
align-items: center;
align-content: center;
justify-content: center;
width: 25%;
height: 90px; height: 90px;
line-height: 90px; line-height: 90px;
text-align: right; text-align: right;
padding-right: 60px;
// padding-right: 20px;
margin-right: 20px; margin-right: 20px;
font-size: 18px; font-size: 18px;
position: relative; position: relative;
cursor: default; cursor: default;
background: url('~@/assets/images/warehouse_tab_bg.png') no-repeat; background: url('~@/assets/images/warehouse_tab_bg.png') no-repeat;
&::before{
content: '';
background-size: 100% 100%;
span{
width: 72px; width: 72px;
height: 52px; height: 52px;
position: absolute;
left: 60px;
top: 20px;
// position: absolute;
// left: 60px;
// top: 20px;
} }
&:first-child::before{
p{
// flex: 1;
text-align: left;
}
&:first-child span{
background: url('~@/assets/images/tab_fullview_logo.png') no-repeat; background: url('~@/assets/images/tab_fullview_logo.png') no-repeat;
} }
&:nth-child(2)::before{
&:nth-child(2) span{
background: url('~@/assets/images/tab_archives_logo.png') no-repeat; background: url('~@/assets/images/tab_archives_logo.png') no-repeat;
} }
&:nth-child(3)::before{
&:nth-child(3) span{
background: url('~@/assets/images/tab_collate_logo.png') no-repeat; background: url('~@/assets/images/tab_collate_logo.png') no-repeat;
} }
&:nth-child(4)::before{
&:nth-child(4) span{
background: url('~@/assets/images/tab_read_logo.png') no-repeat; background: url('~@/assets/images/tab_read_logo.png') no-repeat;
} }
} }
.active-nav{ .active-nav{
color: #fff; color: #fff;
background: url('~@/assets/images/warehouse_tab_active.png') no-repeat; background: url('~@/assets/images/warehouse_tab_active.png') no-repeat;
background-size: 100% 100%;
} }
} }

2
src/views/storeManage/warehouse3DConfig/index.vue

@ -16,7 +16,7 @@
</el-select> </el-select>
</div> </div>
<div> <div>
<el-button type="primary" class="el-icon-more" size="mini" @click="handleBindParam">绑定参数</el-button>
<el-button type="primary" class="iconfont icon-bangdingcanshu-fanbai" size="mini" @click="handleBindParam">绑定参数</el-button>
</div> </div>
</div> </div>
<div class="app-container container-wrap"> <div class="app-container container-wrap">

Loading…
Cancel
Save