<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: 10px;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:["状态监视","矩阵监视","风场监视","人员监视"], inconList:["form","favor","question","edit"] } }, methods:{ openDrawer:function(){ this.$refs.drawer.openDrawer(250,this.drawerList,this.inconList); }, closeDrawer:function(){ this.drawerIsShow=false; } } }; </script> <style> page { } .top { width: 100%; height: 95upx; padding-top: 5upx; background-color: #E93131; } .threeLine { width: 50px; height: 45px; float: left; } .text { width: calc(100% - 100px); height: 45px; float: left; color: white; 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>