<template>
|
<!-- 工作台 -->
|
<view class="container">
|
<!-- #ifndef H5 -->
|
<view class="status_bar"></view>
|
<!-- #endif -->
|
<view class="header flex align-center justify-between">
|
<text class="font-18 dark-gray">HIVE</text>
|
<view>
|
<text class="icon gray iconfont iconsousuo mr-15"></text>
|
<text class="icon gray iconfont iconjiahao" @click.stop="isShow=!isShow"></text>
|
</view>
|
</view>
|
<popover class="popup-content" v-show="isShow">
|
<view class="triangle"></view>
|
<view class="popup-item flex align-center">
|
<text class="icon white iconfont iconjiahao mr-5"></text>
|
<text class="white font-14 popup-content-text">新增会员</text>
|
</view>
|
<view class="popup-item flex align-center">
|
<text class="icon white iconfont iconsaomiao mr-5"></text>
|
<text class="white font-14 popup-content-text">扫一扫</text>
|
</view>
|
</popover>
|
<view class="condition flex justify-between">
|
<view class="flex flex-v align-center">
|
<text class="font-17 white">0</text>
|
<text class="font-15 white mt-10">预约</text>
|
</view>
|
<view class="flex flex-v align-center">
|
<text class="font-17 white">2</text>
|
<text class="font-15 white mt-10">进行中</text>
|
</view>
|
<view class="flex flex-v align-center">
|
<text class="font-17 white">5</text>
|
<text class="font-15 white mt-10">代付款</text>
|
</view>
|
<view class="flex flex-v align-center">
|
<text class="font-17 white">15</text>
|
<text class="font-15 white mt-10">欠款</text>
|
</view>
|
</view>
|
<view class="content-item mt-10">
|
<text class="title">订单</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="title">项目/服务</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="title">代办</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="title">仓库</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="title">报表</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-15">
|
<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>
|
.icon {
|
font-size: 18px;
|
text-align: center;
|
font-family: texticons;
|
}
|
.container{
|
padding: 0 10px;
|
}
|
.header{
|
padding: 12px 5px;
|
}
|
.condition{
|
background-color: #518EFF;
|
padding: 15px 30px;
|
border-radius: 4px;
|
}
|
.content-item{
|
background: #FFFFFF;
|
padding: 15px 0;
|
border-radius: 4px;
|
margin: 10px 0;
|
box-shadow:0 6px 6px rgba(237,234,244,0.5);
|
}
|
.title{
|
font-size: 14px;
|
color: #666666;
|
padding-left: 15px;
|
padding-bottom: 5px;
|
}
|
.content-icon{
|
width: 30px;
|
height: 30px;
|
}
|
.list-item{
|
width: 25%;
|
}
|
.popup-content{
|
position: absolute;
|
right: 9px;
|
top: 48px;
|
padding-left: 10px;
|
}
|
.triangle{
|
width: 0;
|
height: 0;
|
border-width: 0 10px 10px;
|
border-style: solid;
|
border-color: transparent transparent #4c4c4c;
|
position: absolute;
|
top:-8px;
|
right: 5px;
|
}
|
.popup-content-text{
|
width: 100%;
|
border-bottom: 1px solid gray;
|
padding: 10px 10px 10px 0;
|
}
|
.popup-content .popup-item:nth-last-of-type(1) .popup-content-text{
|
border-bottom: 0;
|
}
|
</style>
|
