Browse Source

调整不同屏幕下的兼容性

main
蒋吉兆 3 years ago
parent
commit
8ac49caca9
  1. 4
      web/src/view/dashboard/dashbordCharts/echartsLine.vue
  2. 6
      web/src/view/dashboard/dashbordTable/dashbordTable.vue
  3. 4
      web/src/view/layout/index.vue

4
web/src/view/dashboard/dashbordCharts/echartsLine.vue

@ -67,7 +67,7 @@ export default {
this.chart.setOption({ this.chart.setOption({
grid: { grid: {
left: '40', left: '40',
right: '40',
right: '20',
top: '40', top: '40',
bottom: '20', bottom: '20',
}, },
@ -102,7 +102,7 @@ export default {
series: [ series: [
{ {
type: 'bar', type: 'bar',
barWidth: 40,
barWidth: '40%',
itemStyle: { itemStyle: {
borderRadius: [5, 5, 0, 0], borderRadius: [5, 5, 0, 0],
color: '#188df0', color: '#188df0',

6
web/src/view/dashboard/dashbordTable/dashbordTable.vue

@ -5,7 +5,7 @@
</div> </div>
<div class="log"> <div class="log">
<div v-for="(item,key) in dataTimeline" :key="key" class="log-item"> <div v-for="(item,key) in dataTimeline" :key="key" class="log-item">
<div class="flex-1 flex"><span class="key" :class="key<3&&'top'">{{ key+1 }}</span></div>
<div class="flex-1 flex key-box"><span class="key" :class="key<3&&'top'">{{ key+1 }}</span></div>
<div class="flex-5 flex message">{{ item.message }}</div> <div class="flex-5 flex message">{{ item.message }}</div>
<div class="flex-3 flex form">{{ item.from }}</div> <div class="flex-3 flex form">{{ item.from }}</div>
</div> </div>
@ -58,8 +58,10 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-top: 14px; margin-top: 14px;
.key-box{
justify-content: center;
}
.key{ .key{
margin-left: 12px;
&.top{ &.top{
background: #314659; background: #314659;
color: #FFFFFF;; color: #FFFFFF;;

4
web/src/view/layout/index.vue

@ -160,7 +160,7 @@ export default {
return this.$route.matched return this.$route.matched
} }
}, },
mounted() {
created() {
const screenWidth = document.body.clientWidth const screenWidth = document.body.clientWidth
if (screenWidth < 1000) { if (screenWidth < 1000) {
this.isMobile = true this.isMobile = true
@ -175,6 +175,8 @@ export default {
this.isSider = true this.isSider = true
this.isCollapse = false this.isCollapse = false
} }
},
mounted() {
emitter.emit('collapse', this.isCollapse) emitter.emit('collapse', this.isCollapse)
emitter.emit('mobile', this.isMobile) emitter.emit('mobile', this.isMobile)
emitter.on('reload', this.reload) emitter.on('reload', this.reload)

Loading…
Cancel
Save