src/components/FlexLayout.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/components/MapPin.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/views/home/index.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/views/mainLayout/components/PageHeader.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/views/mainLayout/index.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 |
src/components/FlexLayout.vue
@@ -90,7 +90,6 @@ height: 100%; } } .flex-layout-body { flex: 1; background-color: #052272; src/components/MapPin.vue
@@ -59,6 +59,7 @@ .map-pin { position: absolute; cursor: pointer; z-index: 1; .map-pin-content { position: relative; top: -@size - @size*0.1; src/views/home/index.vue
@@ -47,45 +47,47 @@ </script> <template> <flex-layout x-no-hidden> <div class="home-content" ref="homeContentDom"> <map-pin name="数据机房" :c-width="cWidth" :c-height="cHeight" :d-width="dWidth" :d-height="dHeight" :x="446" :y="355"></map-pin> <map-pin name="培养间" :c-width="cWidth" :c-height="cHeight" :d-width="dWidth" :d-height="dHeight" :x="555" :y="385"></map-pin> <map-pin name="测序间" :c-width="cWidth" :c-height="cHeight" :d-width="dWidth" :d-height="dHeight" :x="765" :y="450"></map-pin> <div class="card-box-list"> <div class="card-box-item" v-for="(item, index) in homeInfo" :key="'key'+index"> <card-box> <div class="home-info-list"> <div class="home-info-item"> {{ item.name }}温度:{{ item.temp }} </div> <div class="home-info-item"> {{ item.name }}湿度:{{ item.hum }} </div> <div class="home-info-item"> {{ item.name }}压差:{{ item.diffPre }} </div> <div class="home-content" ref="homeContentDom"> <map-pin name="数据机房" :c-width="cWidth" :c-height="cHeight" :d-width="dWidth" :d-height="dHeight" :x="0" :y="0"></map-pin> <map-pin name="数据机房" :c-width="cWidth" :c-height="cHeight" :d-width="dWidth" :d-height="dHeight" :x="446" :y="355"></map-pin> <map-pin name="培养间" :c-width="cWidth" :c-height="cHeight" :d-width="dWidth" :d-height="dHeight" :x="555" :y="385"></map-pin> <map-pin name="测序间" :c-width="cWidth" :c-height="cHeight" :d-width="dWidth" :d-height="dHeight" :x="765" :y="450"></map-pin> <div class="card-box-list"> <div class="card-box-item" v-for="(item, index) in homeInfo" :key="'key'+index"> <card-box> <div class="home-info-list"> <div class="home-info-item"> {{ item.name }}温度:{{ item.temp }} </div> </card-box> </div> <div class="home-info-item"> {{ item.name }}湿度:{{ item.hum }} </div> <div class="home-info-item"> {{ item.name }}压差:{{ item.diffPre }} </div> </div> </card-box> </div> </div> </flex-layout> </div> </template> <style scoped> src/views/mainLayout/components/PageHeader.vue
@@ -16,61 +16,60 @@ <template> <div class="header-wrapper"> <flex-layout no-bg direction="row"> <div class="header-left-wrapper"> <div class="header-left-wrapper"> <span class="menu-state-icon" @click="changeMenuState"> <el-icon size="20"> <Fold v-if="!isCollapse" /> <Expand v-else/> </el-icon> </span> <span class="sys-name">安琪酵母(西藏)益生菌信息采集中心智能实验室</span> <span class="sys-version">V1.21</span> </div> <template #footer> <div class="page-header-right"> <div class="hdw-avatar"> <el-dropdown @command="commandClick" @visible-change="visibleChange"> <div class="hdw-avatar-wrapper"> <span class="sys-name">安琪酵母(西藏)益生菌信息采集中心智能实验室</span> <span class="sys-version">V1.21</span> </div> <div class="page-header-right"> <div class="hdw-avatar"> <el-dropdown @command="commandClick" @visible-change="visibleChange"> <div class="hdw-avatar-wrapper"> <span class="hdw-avatar-icon"> <el-icon size="18"><Avatar /></el-icon> </span> <span class="hdw-avatar-text">admin</span> <el-icon size="16"> <ArrowUp v-if="isVisible" /> <ArrowDown v-else /> </el-icon> </div> <template #dropdown> <el-dropdown-menu> <el-dropdown-item command="passwordChange">密码修改</el-dropdown-item> <el-dropdown-item command="outSystem">安全退出</el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> <span class="hdw-avatar-text">admin</span> <el-icon size="16"> <ArrowUp v-if="isVisible" /> <ArrowDown v-else /> </el-icon> </div> </div> </template> </flex-layout> <template #dropdown> <el-dropdown-menu> <el-dropdown-item command="passwordChange">密码修改</el-dropdown-item> <el-dropdown-item command="outSystem">安全退出</el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </div> </div> </div> </template> <style lang="less" scoped> .header-left-wrapper { user-select: none; height: 64px; .header-wrapper { display: flex; } .header-left-wrapper { flex: 1; user-select: none; height: 62px; align-items: center; padding-right: 150px; min-width: 12rem; background-image: url("@/assets/images/page-header-left-bg.png"); background-repeat: no-repeat; background-size: 150% 100%; color: @font-color-high-light; width: 100vh; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; span { font-size: 24px; font-size: 32px; font-weight: bold; letter-spacing: 0.2rem; &.menu-state-icon { @@ -87,7 +86,7 @@ &.sys-version { padding-top: 8px; font-size: 16px; vertical-align: bottom; vertical-align: middle; } } } src/views/mainLayout/index.vue
@@ -5,10 +5,10 @@ </script> <template> <flex-layout no-bg direction="row" bg-img> <template v-slot:header> <div class="main-layout-wrapper"> <div class="main-layout-menu"> <slide-menu></slide-menu> </template> </div> <div class="main-layout-content"> <div class="main-layout-absolute"> <flex-layout no-bg> @@ -21,22 +21,38 @@ </flex-layout> </div> </div> </flex-layout> </div> </template> <style scoped> <style lang="less" scoped> .main-layout-wrapper { position: relative; display: flex; height: 100%; flex-direction: row; background-image: url("@/assets/images/dw_bg.jpg"); background-size: 100% 100%; background-repeat: no-repeat; overflow: hidden; .main-layout-menu { overflow-y: auto; } .main-layout-content { position: relative; flex: 1; height: 100%; .main-layout-absolute { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } } } .page-content { height: 100%; } .main-layout-content { position: relative; height: 100%; .main-layout-absolute { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } } </style>