<template>
|
<!-- 工作台 -->
|
<view class="container">
|
<!-- #ifndef H5 -->
|
<view class="status_bar"></view>
|
<!-- #endif -->
|
<view class="header flex align-center justify-between">
|
<text class="font-18">HIVE</text>
|
<view>
|
<text class="icon mr-15"></text>
|
<text class="icon" @click.stop="isShow=!isShow"></text>
|
</view>
|
</view>
|
<popover class="popup-content" v-show="isShow">
|
<view>
|
<text class="icon mr-5"></text>
|
<text>新增会员</text>
|
</view>
|
<view class="mt-10">
|
<text class="icon mr-5"></text>
|
<text>扫一扫</text>
|
</view>
|
</popover>
|
<view class="condition flex justify-between mt-15">
|
<view class="flex flex-v align-center">
|
<text class="font-18 white">0</text>
|
<text class="font-16 white">预约</text>
|
</view>
|
<view class="flex flex-v align-center">
|
<text class="font-18 white">2</text>
|
<text class="font-16 white">进行中</text>
|
</view>
|
<view class="flex flex-v align-center">
|
<text class="font-18 white">5</text>
|
<text class="font-16 white">代付款</text>
|
</view>
|
<view class="flex flex-v align-center">
|
<text class="font-18 white">15</text>
|
<text class="font-16 white">欠款</text>
|
</view>
|
</view>
|
<view class="content-item mt-10">
|
<text class="font-14 font-gray">订单</text>
|
<view class="flex align-center mt-10">
|
<view class="flex flex-v align-center list-item">
|
<image class="content-icon" src="../../static/images/order1.png"></image>
|
<text class="font-12 mt-10 font-dark">新建订单</text>
|
</view>
|
<view class="flex flex-v align-center list-item">
|
<image class="content-icon" src="../../static/images/order2.png"></image>
|
<text class="font-12 mt-10 font-dark">代付款</text>
|
</view>
|
<view class="flex flex-v align-center list-item">
|
<image class="content-icon" src="../../static/images/order3.png"></image>
|
<text class="font-12 mt-10 font-dark">已付款</text>
|
</view>
|
<view class="flex flex-v align-center list-item">
|
<image class="content-icon" src="../../static/images/order4.png"></image>
|
<text class="font-12 mt-10 font-dark">欠款</text>
|
</view>
|
</view>
|
</view>
|
<view class="content-item mt-10">
|
<text class="font-14 font-gray">项目/服务</text>
|
<view class="flex align-center mt-10">
|
<view class="flex flex-v align-center list-item">
|
<image class="content-icon" src="../../static/images/sever1.png"></image>
|
<text class="font-12 mt-10 font-dark">新建预约</text>
|
</view>
|
<view class="flex flex-v align-center list-item">
|
<image class="content-icon" src="../../static/images/sever2.png"></image>
|
<text class="font-12 mt-10 font-dark">看板</text>
|
</view>
|
<view class="flex flex-v align-center list-item">
|
<image class="content-icon" src="../../static/images/sever3.png"></image>
|
<text class="font-12 mt-10 font-dark">待服务</text>
|
</view>
|
<view class="flex flex-v align-center list-item">
|
<image class="content-icon" src="../../static/images/sever4.png"></image>
|
<text class="font-12 mt-10 font-dark">服务完成</text>
|
</view>
|
</view>
|
</view>
|
<view class="content-item mt-10">
|
<text class="font-14 font-gray">代办</text>
|
<view class="flex align-center mt-10">
|
<view class="flex flex-v align-center list-item">
|
<image class="content-icon" src="../../static/images/commission1.png"></image>
|
<text class="font-12 mt-10 font-dark">跟进</text>
|
</view>
|
<view class="flex flex-v align-center list-item">
|
<image class="content-icon" src="../../static/images/commission2.png"></image>
|
<text class="font-12 mt-10 font-dark">日报</text>
|
</view>
|
<view class="flex flex-v align-center list-item">
|
<image class="content-icon" src="../../static/images/commission3.png"></image>
|
<text class="font-12 mt-10 font-dark">通知</text>
|
</view>
|
</view>
|
</view>
|
<view class="content-item mt-10">
|
<text class="font-14 font-gray">仓库</text>
|
<view class="flex align-center mt-10">
|
<view class="flex flex-v align-center list-item">
|
<image class="content-icon" src="../../static/images/warehouse1.png"></image>
|
<text class="font-12 mt-10 font-dark">库存查询</text>
|
</view>
|
<view class="flex flex-v align-center list-item">
|
<image class="content-icon" src="../../static/images/warehouse2.png"></image>
|
<text class="font-12 mt-10 font-dark">盘点</text>
|
</view>
|
</view>
|
</view>
|
<view class="content-item">
|
<text class="font-14 font-gray">报表</text>
|
<view class="flex align-center mt-10">
|
<view class="flex flex-v align-center list-item">
|
<image class="content-icon" src="../../static/images/statement1.png"></image>
|
<text class="font-12 mt-10 font-dark">排行榜</text>
|
</view>
|
<view class="flex flex-v align-center list-item">
|
<image class="content-icon" src="../../static/images/statement2.png"></image>
|
<text class="font-12 mt-10 font-dark">员工业绩</text>
|
</view>
|
<view class="flex flex-v align-center list-item">
|
<image class="content-icon" src="../../static/images/statement3.png"></image>
|
<text class="font-12 mt-10 font-dark">门店业绩</text>
|
</view>
|
<view class="flex flex-v align-center list-item">
|
<image class="content-icon" src="../../static/images/statement4.png"></image>
|
<text class="font-12 mt-10 font-dark">产品报表</text>
|
</view>
|
</view>
|
<view class="flex align-center mt-10">
|
<view class="flex flex-v align-center list-item">
|
<image class="content-icon" src="../../static/images/statement5.png"></image>
|
<text class="font-12 mt-10 font-dark">库存预警</text>
|
</view>
|
<view class="flex flex-v align-center list-item">
|
<image class="content-icon" src="../../static/images/statement6.png"></image>
|
<text class="font-12 mt-10 font-dark">客户流失预警</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import popover from "../../components/popover/index.vue"
|
export default{
|
components:{
|
popover
|
},
|
data(){
|
return{
|
isShow:false
|
}
|
},
|
onLoad() {
|
document.addEventListener('click', () => {
|
this.isShow = false
|
}, false)
|
},
|
methods:{
|
appear(){
|
|
}
|
}
|
}
|
</script>
|
|
<style>
|
@font-face {
|
font-family: texticons;
|
font-weight: normal;
|
font-style: normal;
|
src: url('//at.alicdn.com/t/font_2263696_lohq5qfkgkq.ttf') format('truetype');
|
}
|
.icon {
|
width: 20px;
|
height: 20px;
|
color: #000000;
|
text-align: center;
|
font-family: texticons;
|
}
|
page{
|
background: #F8F8F8;
|
}
|
.container{
|
padding: 0 10px;
|
}
|
.header{
|
padding: 10px 5px;
|
}
|
.condition{
|
background-color: #518EFF;
|
padding: 16px 30px;
|
border-radius: 4px;
|
}
|
.content-item{
|
background: #FFFFFF;
|
padding:16px;
|
border-radius: 4px;
|
margin: 10px 0;
|
}
|
.content-icon{
|
width: 32px;
|
height: 32px;
|
}
|
.list-item{
|
width: 25%;
|
}
|
.popup-content{
|
background: #FFFFFF;
|
border: 1px solid #ABB1CC;
|
padding: 10px;
|
border-radius: 4px;
|
position: absolute;
|
right: 10px;
|
top: 35px;
|
}
|
</style>
|
