<template> <view class="content"> <view class="top"> <view class="threeLine" @tap="openDrawer"> <image src="../../static/picture/fourLine.png" style="width: 30px;height: 30px;margin-top: 8px;margin-left: 10px;"></image> </view> <view class="text"> <view class="notice"> <view class="icon cuIcon-notice text-white" v-if="badge != 0"> <view class="cu-tag looknumber"> <block v-if="badge != 1">{{ badge > 99 ? '99+' : badge }}</block> </view> </view> </view> 宁夏新能源公司 </view> <view class="plus">+</view> </view> <!-- 抽屉组件 --> <div> <drawer ref="drawer"></drawer> </div> </view> </template> <script> import drawer from '../../components/drawer/threeLineDrawer.vue'; export default { components: { "drawer": drawer, }, data: function() { return { badge: 22, drawerList: [ {"name":"首页"}, {"name":"状态监视"}, {"name":"矩阵监视"}, {"name":"风场监视"}, {"name":"人员监视"} , ], } }, methods: { openDrawer: function() { this.$refs.drawer.openDrawer(250, this.drawerList, this.inconList); }, closeDrawer: function() { this.drawerIsShow = false; }, }, } </script> <style> body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", STHeiti, "Microsoft Yahei", Tahoma, Simsun, sans-serif; font-size: 20px; color: silver; background: #000; } page { background-color: #1F1F1F; overflow-x: hidden; } .top { width: 100%; height: 95upx; padding-top: 5upx; background-color: #1F1F1F; } .threeLine { width: 50px; height: 45px; float: left; } .text { width: calc(100% - 100px); height: 45px; float: left; user-select: text; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; color: silver; line-height: 45px; text-align: center; font-size: 18px; } .notice { width: 50px; height: 45px; float: left; } .plus { width: 50px; height: 45px; float: right; color: white; font-size: 35px; line-height: 45px; text-align: center; } </style>