Skip to content

C
connector-admin
Commit 7fbf7522 authored by sunshine.wang@elitesland.com's avatar sunshine.wang@elitesland.com
Browse files
Options

首页布局调整，条码生成页面完善

parent e593a123
Hide whitespace changes
Inline Side-by-side
Showing with 175 additions and 82 deletions
src/layout/components/Navbar.vue
View file @ 7fbf7522
<template>
<div class="navbar">
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
<hamburger
id="hamburger-container"
:is-active="sidebar.opened"
class="hamburger-container"
@toggleClick="toggleSideBar"
/>
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
<div class="right-menu">
<template v-if="device!=='mobile'">
<template v-if="device !== 'mobile'">
<search id="header-search" class="right-menu-item" />
<el-tooltip content="项目文档" effect="dark" placement="bottom">
<Doc class="right-menu-item hover-effect" />
</el-tooltip>
<el-tooltip content="全屏缩放" effect="dark" placement="bottom">
<screenfull id="screenfull" class="right-menu-item hover-effect" />
</el-tooltip>
......@@ -19,12 +19,17 @@
<el-tooltip content="布局设置" effect="dark" placement="bottom">
<size-select id="size-select" class="right-menu-item hover-effect" />
</el-tooltip>
</template>
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
<el-dropdown
class="avatar-container right-menu-item hover-effect"
trigger="click"
>
<div class="avatar-wrapper">
<img :src="user.avatarName ? baseApi + '/avatar/' + user.avatarName : Avatar" class="user-avatar">
<div class="userIcon">
<i class="el-icon-user-solid" />
</div>
<!-- <img :src="user.avatarName ? baseApi + '/avatar/' + user.avatarName : Avatar" class="user-avatar"> -->
<i class="el-icon-caret-bottom" />
</div>
<el-dropdown-menu slot="dropdown">
......@@ -53,7 +58,6 @@
import { mapGetters } from 'vuex'
import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'
import Doc from '@/components/Doc'
import Screenfull from '@/components/Screenfull'
import SizeSelect from '@/components/SizeSelect'
import Search from '@/components/HeaderSearch'
......@@ -65,8 +69,7 @@ export default {
Hamburger,
Screenfull,
SizeSelect,
Search,
Doc
Search
},
data() {
return {
......@@ -75,12 +78,7 @@ export default {
}
},
computed: {
...mapGetters([
'sidebar',
'device',
'user',
'baseApi'
]),
...mapGetters(['sidebar', 'device', 'user', 'baseApi']),
show: {
get() {
return this.$store.state.settings.showSettings
......@@ -121,18 +119,18 @@ export default {
overflow: hidden;
position: relative;
background: #fff;
box-shadow: 0 1px 4px rgba(0,21,41,.08);
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
.hamburger-container {
line-height: 46px;
height: 100%;
float: left;
cursor: pointer;
transition: background .3s;
-webkit-tap-highlight-color:transparent;
transition: background 0.3s;
-webkit-tap-highlight-color: transparent;
&:hover {
background: rgba(0, 0, 0, .025)
background: rgba(0, 0, 0, 0.025);
}
}
......@@ -164,10 +162,10 @@ export default {
&.hover-effect {
cursor: pointer;
transition: background .3s;
transition: background 0.3s;
&:hover {
background: rgba(0, 0, 0, .025)
background: rgba(0, 0, 0, 0.025);
}
}
}
......@@ -185,7 +183,9 @@ export default {
height: 40px;
border-radius: 10px;
}
.userIcon {
height: 40px;
}
.el-icon-caret-bottom {
cursor: pointer;
position: absolute;
......
src/views/components/QrCodeDemo.vue
View file @ 7fbf7522
......@@ -25,7 +25,7 @@
</el-select>
</div>
<div class="body-container">
<div class="cardOne" style="margin-top:40px; margin-left:40px ">
<div class="cardOne" style="margin-top:30px; margin-left:-10px ">
<el-card class="box-card">
<div slot="header" class="clearfix">
<el-button
......
src/views/dashboard/Information.vue 0 → 100644
View file @ 7fbf7522
<template>
<el-row :gutter="32" class="Information">
<el-col :span="12">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span><i class="el-icon-s-order" /> 我的待办</span>
</div>
<div>
<el-card shadow="hover" class="textList">
入库上架---A100---C100---2022-04-18 15:11:29
</el-card>
<el-card shadow="hover" class="textList">
库存转移---TEST-003---2022-04-18 15:11:29
</el-card>
<el-card shadow="hover" class="textList">
拣货出库---TEST-003---2022-04-18 15:11:29
</el-card>
</div>
</el-card>
</el-col>
<el-col :span="12">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span><i class="el-icon-message-solid" /> 系统消息</span>
<!-- <el-button style="float: right; padding: 3px 0" type="text"
>操作按钮</el-button
> -->
</div>
<div>
<el-card shadow="hover" class="textList">
拣货出库---1000000008---2022-04-18 15:11:29
</el-card>
<el-card shadow="hover" class="textList">
拣货出库---1000000007---2022-04-18 15:11:29
</el-card>
<el-card shadow="hover" class="textList">
拣货出库---1000000004---2022-04-18 15:11:29
</el-card>
<!-- <el-card shadow="hover" class="textList">
鼠标悬浮时显示
</el-card> -->
</div>
</el-card>
</el-col>
</el-row>
</template>
<script>
export default {
methods: {}
}
</script>
<style lang="scss" scoped>
.text {
font-size: 14px;
}
.item {
margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
.box-card {
border-radius: 10px;
width: 520px;
padding: 0px 0px 15px 0px;
}
.textList {
background-color: rgba(240, 248, 255, 0.562);
border-radius: 10px;
margin: 10px 0px;
padding: 5px 5px 5px 5px;
}
</style>
src/views/dashboard/PanelGroup.vue
View file @ 7fbf7522
......@@ -9,7 +9,12 @@
<div class="card-panel-text">
在线用户
</div>
<count-to :start-val="0" :end-val="200" :duration="2600" class="card-panel-num" />
<count-to
:start-val="0"
:end-val="200"
:duration="2600"
class="card-panel-num"
/>
</div>
</div>
</el-col>
......@@ -22,7 +27,12 @@
<div class="card-panel-text">
消息通知
</div>
<count-to :start-val="0" :end-val="12000" :duration="3000" class="card-panel-num" />
<count-to
:start-val="0"
:end-val="12000"
:duration="3000"
class="card-panel-num"
/>
</div>
</div>
</el-col>
......@@ -35,7 +45,12 @@
<div class="card-panel-text">
待收货订单
</div>
<count-to :start-val="0" :end-val="20" :duration="3200" class="card-panel-num" />
<count-to
:start-val="0"
:end-val="20"
:duration="3200"
class="card-panel-num"
/>
</div>
</div>
</el-col>
......@@ -48,7 +63,12 @@
<div class="card-panel-text">
待拣货订单
</div>
<count-to :start-val="0" :end-val="80" :duration="3600" class="card-panel-num" />
<count-to
:start-val="0"
:end-val="80"
:duration="3600"
class="card-panel-num"
/>
</div>
</div>
</el-col>
......@@ -86,8 +106,8 @@ export default {
overflow: hidden;
color: #666;
background: #fff;
box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
border-color: rgba(0, 0, 0, .05);
box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
border-color: rgba(0, 0, 0, 0.05);
&:hover {
.card-panel-icon-wrapper {
......@@ -107,7 +127,7 @@ export default {
}
.icon-shopping {
background: #34bfa3
background: #34bfa3;
}
}
......@@ -124,7 +144,7 @@ export default {
}
.icon-shopping {
color: #34bfa3
color: #34bfa3;
}
.card-panel-icon-wrapper {
......@@ -160,7 +180,7 @@ export default {
}
}
@media (max-width:550px) {
@media (max-width: 550px) {
.card-panel-description {
display: none;
}
......
src/views/home.vue
View file @ 7fbf7522
<template>
<div class="dashboard-container">
<div class="dashboard-editor-container">
<github-corner class="github-corner" />
<el-row>
<div class="firLine">
<panel-group @handleSetLineChartData="handleSetLineChartData" />
</div>
</el-row>
<panel-group @handleSetLineChartData="handleSetLineChartData" />
<el-row style="padding:16px 16px 0;margin-bottom:32px;">
<div class="secLine">
<Information />
</div>
</el-row>
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
<line-chart :chart-data="lineChartData" />
</el-row>
<el-row :gutter="32">
<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>
</div>
</div>
</template>
<script>
import GithubCorner from '@/components/GithubCorner'
// 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 BarChart from '@/components/Echarts/BarChart'
import Information from './dashboard/Information'
const lineChartData = {
newVisitis: {
......@@ -59,12 +48,10 @@ const lineChartData = {
export default {
name: 'Dashboard',
components: {
GithubCorner,
// GithubCorner,
PanelGroup,
LineChart,
RadarChart,
PieChart,
BarChart
Information
},
data() {
return {
......@@ -80,28 +67,31 @@ export default {
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
padding: 32px;
background-color: rgb(240, 242, 245);
position: relative;
.dashboard-editor-container {
padding: 32px;
background-color: rgb(240, 242, 245);
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;
padding: 16px 16px 0;
margin-bottom: 32px;
}
.chart-wrapper {
background: #fff;
padding: 16px 16px 0;
margin-bottom: 32px;
}
.firLine {
height: 80px;
}
}
@media (max-width:1024px) {
.chart-wrapper {
padding: 8px;
}
@media (max-width: 1024px) {
.chart-wrapper {
padding: 8px;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment