You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
339 lines
6.4 KiB
339 lines
6.4 KiB
<template>
|
|
<view class="index-container">
|
|
<view class="ic-content">
|
|
<view class="ic-header">
|
|
<view class="ih-address" v-if="false">
|
|
<view>广州欧轩智能场馆(共6家)</view>
|
|
<image src="/static/images/icon/arrow_ff.png" mode="aspectFit"></image>
|
|
</view>
|
|
<view class="ih-btn" hover-class="hover-active">点击登陆</view>
|
|
<view class="ih-tip">今日总收入</view>
|
|
<view class="ih-price"><text>¥</text>0.00</view>
|
|
<view class="ih-amount">
|
|
<view>
|
|
<view>收款笔数</view>
|
|
<view>10</view>
|
|
</view>
|
|
<view>
|
|
<view>收款笔数</view>
|
|
<view>10</view>
|
|
</view>
|
|
</view>
|
|
<image class="ih-bg-icon" style="left: 0;" mode="aspectFit" src="/static/images/icon/index/header_bg_a.png"></image>
|
|
<image class="ih-bg-icon" mode="aspectFit" src="/static/images/icon/index/header_bg_b.png"></image>
|
|
</view>
|
|
<view class="ic-notice">
|
|
<view class="in-left">
|
|
<image src="/static/images/icon/index/notice.png" mode="aspectFit"></image>
|
|
<text>消息中心</text>
|
|
</view>
|
|
<view class="in-right">
|
|
<view>99</view>
|
|
<image src="/static/images/icon/arrow_b2.png" mode="aspectFit"></image>
|
|
</view>
|
|
</view>
|
|
<view class="ic-tabs">
|
|
<view class="it-item" v-for="e in tabList" :key="e.id">
|
|
<image mode="aspectFit" :src="'/static/images/icon/index/tab_'+ e.id + '.png'"></image>
|
|
<view>{{e.name}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="ox-dark-mask" v-if="false">
|
|
<view class="ic-author-modal">
|
|
<view class="iam-title">微信授权</view>
|
|
<view class="iam-tip">您的信息和数据将受到保护</view>
|
|
<image class="iam-pic" mode="aspectFit" src="/static/images/icon/author_modal.png"></image>
|
|
<view class="iam-btns">
|
|
<view hover-class="hover-active">取消</view>
|
|
<view hover-class="hover-active">授权并登录</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
const tabList = [
|
|
{
|
|
id: 0,
|
|
name: '营业额',
|
|
path: ''
|
|
},
|
|
{
|
|
id: 1,
|
|
name: '收款记录',
|
|
path: ''
|
|
},
|
|
{
|
|
id: 2,
|
|
name: '经营分析',
|
|
path: ''
|
|
},
|
|
{
|
|
id: 3,
|
|
name: '场馆订单',
|
|
path: ''
|
|
},
|
|
{
|
|
id: 4,
|
|
name: '会员卡订单',
|
|
path: ''
|
|
},
|
|
{
|
|
id: 5,
|
|
name: '积分订单',
|
|
path: ''
|
|
},
|
|
{
|
|
id: 6,
|
|
name: '员工管理',
|
|
path: ''
|
|
},
|
|
{
|
|
id: 7,
|
|
name: '核销查询',
|
|
path: ''
|
|
},
|
|
{
|
|
id: 8,
|
|
name: '场地管理',
|
|
path: ''
|
|
},
|
|
];
|
|
export default {
|
|
data() {
|
|
return {
|
|
tabList
|
|
}
|
|
},
|
|
onLoad() {
|
|
|
|
},
|
|
methods: {
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "../../../style/public.scss";
|
|
.index-container{
|
|
position: relative;
|
|
}
|
|
.ic-content{
|
|
padding: 24upx;
|
|
}
|
|
.ic-header{
|
|
position: relative;
|
|
height: 476upx;
|
|
margin-bottom: 48upx;
|
|
padding: 38upx 24upx 0;
|
|
border-radius: 14upx;
|
|
background-color: $themeColor;
|
|
.ih-address{
|
|
margin-bottom: 26upx;
|
|
@include centerFlex(center);
|
|
>view{
|
|
max-width: 90%;
|
|
line-height: 50upx;
|
|
text-align: center;
|
|
font-size: 36upx;
|
|
color: #fff;
|
|
@include textHide(1);
|
|
}
|
|
>image{
|
|
flex-shrink: 0;
|
|
margin-left: 20upx;
|
|
width: 28upx;
|
|
height: 28upx;
|
|
}
|
|
}
|
|
.ih-btn{
|
|
margin: 0 auto 28upx;
|
|
width: 160upx;
|
|
height: 48upx;
|
|
text-align: center;
|
|
line-height: 48upx;
|
|
font-size: 28upx;
|
|
color: $themeColor;
|
|
background-color: #fff;
|
|
border-radius: 24upx;
|
|
}
|
|
.ih-tip{
|
|
margin-bottom: 8upx;
|
|
line-height: 40upx;
|
|
text-align: center;
|
|
font-size: 28upx;
|
|
color: rgba($color: #fff, $alpha: .7);
|
|
}
|
|
.ih-price{
|
|
margin-bottom: 50upx;
|
|
line-height: 96upx;
|
|
text-align: center;
|
|
font-size: 84upx;
|
|
font-weight: 500;
|
|
color: #fff;
|
|
@include textHide(1);
|
|
>text{
|
|
line-height: 74upx;
|
|
font-size: 64upx;
|
|
}
|
|
}
|
|
.ih-amount{
|
|
@include centerFlex(space-around);
|
|
>view{
|
|
>view{
|
|
&:first-child{
|
|
margin-bottom: 16upx;
|
|
line-height: 40upx;
|
|
text-align: center;
|
|
font-size: 28upx;
|
|
color: rgba($color: #fff, $alpha: .7);
|
|
}
|
|
&+view{
|
|
line-height: 56upx;
|
|
text-align: center;
|
|
font-size: 40upx;
|
|
font-weight: 500;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.ih-bg-icon{
|
|
position: absolute;
|
|
top: 0;
|
|
width: 120upx;
|
|
height: 142upx;
|
|
&+.ih-bg-icon{
|
|
right: 0;
|
|
top: 38upx;
|
|
width: 240upx;
|
|
height: 400upx;
|
|
}
|
|
}
|
|
}
|
|
.ic-notice{
|
|
margin-bottom: 24upx;
|
|
padding: 0 24upx;
|
|
height: 108upx;
|
|
border-radius: 10upx;
|
|
background-color: #fff;
|
|
@include centerFlex(space-between);
|
|
.in-left{
|
|
>image{
|
|
vertical-align: middle;
|
|
margin-right: 10upx;
|
|
width: 52upx;
|
|
height: 50upx;
|
|
|
|
}
|
|
>text{
|
|
font-size: 28upx;
|
|
line-height: 40upx;
|
|
color: #1a1a1a;
|
|
}
|
|
}
|
|
.in-right{
|
|
@include centerFlex(flex-end);
|
|
>view{
|
|
margin-right: 14upx;
|
|
line-height: 50upx;
|
|
text-align: center;
|
|
width: 50upx;
|
|
height: 50upx;
|
|
line-height: 50upx;
|
|
font-size: 24upx;
|
|
border-radius: 50%;
|
|
color: #fff;
|
|
background-color: #ea5061;
|
|
@include textHide(1);
|
|
|
|
}
|
|
>image{
|
|
width: 28upx;
|
|
height: 28upx;
|
|
|
|
}
|
|
}
|
|
}
|
|
.ic-tabs{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
.it-item{
|
|
padding-top: 54upx;
|
|
margin-bottom: 24upx;
|
|
flex-shrink: 0;
|
|
flex-grow: 0;
|
|
width: 218upx;
|
|
height: 218upx;
|
|
border-radius: 10upx;
|
|
background-color: #fff;
|
|
>image{
|
|
display: block;
|
|
margin: 0 auto 20upx;
|
|
width: 52upx;
|
|
height: 52upx;
|
|
}
|
|
>view{
|
|
text-align: center;
|
|
line-height: 40upx;
|
|
font-size: 28upx;
|
|
color: #1a1a1a;
|
|
}
|
|
}
|
|
}
|
|
.ic-author-modal{
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
padding-top: 60upx;
|
|
width: 662upx;
|
|
height: 884upx;
|
|
border-radius: 10upx;
|
|
background-color: #fff;
|
|
.iam-title{
|
|
margin-bottom: 22upx;
|
|
text-align: center;
|
|
line-height: 60upx;
|
|
font-size: 44upx;
|
|
font-weight: 500;
|
|
color: #1a1a1a;
|
|
}
|
|
.iam-tip{
|
|
margin-bottom: 52upx;
|
|
line-height: 40upx;
|
|
text-align: center;
|
|
font-size: 28upx;
|
|
color: #9c9c9f;
|
|
}
|
|
.iam-pic{
|
|
margin: 0 auto 62upx;
|
|
display: block;
|
|
width: 488upx;
|
|
height: 416upx;
|
|
}
|
|
.iam-btns{
|
|
@include centerFlex(center);
|
|
>view{
|
|
margin: 0 20upx;
|
|
width: 240upx;
|
|
height: 92upx;
|
|
line-height: 88upx;
|
|
text-align: center;
|
|
border-radius: 46upx;
|
|
border: 2upx solid $themeColor;
|
|
font-size: 32upx;
|
|
color: $themeColor;
|
|
&+view{
|
|
background-color: $themeColor;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|