|
|
@@ -0,0 +1,445 @@
|
|
|
+<template>
|
|
|
+ <scroll-view scroll-y class="business-page">
|
|
|
+ <view class="business-info">
|
|
|
+ <view class="amount-view">
|
|
|
+ <text class="amount-label">账户余额</text>
|
|
|
+ <text class="amount-btn">
|
|
|
+ 瑞景店
|
|
|
+ <text class="iconfont iconsanjiao_xia"></text>
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view class="price-view">
|
|
|
+ <text class="unit">￥</text>
|
|
|
+ <text class="price">{{ "278,209.20" || "--" }}</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="down-view">
|
|
|
+ <view class="down-item">
|
|
|
+ <text class="label">应收客户款</text>
|
|
|
+ <text class="value"
|
|
|
+ ><text class="unit">￥</text>{{ "278,209.20" || "--" }}</text
|
|
|
+ >
|
|
|
+ </view>
|
|
|
+ <view class="down-item">
|
|
|
+ <text class="label">应付供应商款</text>
|
|
|
+ <text class="value"
|
|
|
+ ><text class="unit">￥</text>{{ "278,209.20" || "--" }}</text
|
|
|
+ >
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="space-view space-layout">
|
|
|
+ <view class="space-left">
|
|
|
+ <view class="title-bar">
|
|
|
+ <image
|
|
|
+ class="title-icon"
|
|
|
+ src="../../../static/images/common/business-stock.png"
|
|
|
+ >
|
|
|
+ </image>
|
|
|
+ <text class="title">
|
|
|
+ 库存成本 ¥ 30,922.46
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="space-right"> </view>
|
|
|
+ </view>
|
|
|
+ <view class="space-view space-remark">
|
|
|
+ <view class="space-left">
|
|
|
+ <view class="show-item">
|
|
|
+ <view class="show-name">库存总数</view>
|
|
|
+ <view class="show-value">123</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="space-right">
|
|
|
+ <view class="show-item">
|
|
|
+ <view class="show-name"
|
|
|
+ >库存预警数
|
|
|
+ <text class="iconfont iconchangjianwentixiangguanwenti2"></text
|
|
|
+ ></view>
|
|
|
+ <view class="show-value red">123</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="space-view space-layout">
|
|
|
+ <view class="space-left">
|
|
|
+ <view class="title-bar">
|
|
|
+ <image
|
|
|
+ class="title-icon"
|
|
|
+ src="../../../static/images/common/business-sale.png"
|
|
|
+ >
|
|
|
+ </image>
|
|
|
+ <text class="title">
|
|
|
+ 今日销售 ¥ 30,922.46
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="space-right">
|
|
|
+ <view class="show-tag down">
|
|
|
+ <view class="tag ">
|
|
|
+ 同期
|
|
|
+ <image class="arrow" src="../../../static/images/common/arrow.png" />
|
|
|
+ </view>
|
|
|
+ <text>-27.00</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="space-view space-remark">
|
|
|
+ <view class="space-left">
|
|
|
+ <view class="show-item">
|
|
|
+ <view class="show-name">近7天销售</view>
|
|
|
+ <view class="show-value"><text class="unit">￥</text>123</view>
|
|
|
+
|
|
|
+ <view class="show-tag up">
|
|
|
+ <view class="tag ">
|
|
|
+ 同期
|
|
|
+ <image class="arrow" src="../../../static/images/common/arrow.png" />
|
|
|
+ </view>
|
|
|
+ <text>+27.00</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="space-right">
|
|
|
+ <view class="show-item">
|
|
|
+ <view class="show-name">
|
|
|
+ 近30天销售
|
|
|
+ </view>
|
|
|
+ <view class="show-value red"><text class="unit">￥</text>123</view>
|
|
|
+ <view class="show-tag up">
|
|
|
+ <view class="tag ">
|
|
|
+ 同期
|
|
|
+ <image class="arrow" src="../../../static/images/common/arrow.png" />
|
|
|
+ </view>
|
|
|
+ <text>+27.00</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="space-view space-layout business-list">
|
|
|
+ <view class="list-tab">
|
|
|
+ <view
|
|
|
+ :class="['tab-item', { active: curTabIndex == index }]"
|
|
|
+ v-for="(item, index) in tabList"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ {{ item.label }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="list-main">
|
|
|
+ <view class="list-item" v-for="(item, index) in bussinessList" :key="index">
|
|
|
+ <view class="item-left">
|
|
|
+ <view class="content-row">
|
|
|
+ <text class="content-label"> 收入</text>
|
|
|
+ <text class="content-value"> <text class="unit">¥</text> 36,950.00</text>
|
|
|
+ </view>
|
|
|
+ <view class="content-row">
|
|
|
+ <text class="content-label"> 支出</text>
|
|
|
+ <text class="content-value"> <text class="unit">¥</text> 36,950.00</text>
|
|
|
+ </view>
|
|
|
+ <view class="content-row">
|
|
|
+ <text class="content-label"> 收入</text>
|
|
|
+ <text class="content-value"> <text class="unit">¥</text> 36,950.00</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item-right">
|
|
|
+ <text class="iconfont iconxiangyou"> </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ curTabIndex: 0,
|
|
|
+ tabList: [
|
|
|
+ {
|
|
|
+ label: "今日",
|
|
|
+ value: "01"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "昨日",
|
|
|
+ value: "02"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "近7天",
|
|
|
+ value: "03"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "近30天",
|
|
|
+ value: "04"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ bussinessList: [{}, {}]
|
|
|
+ };
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.business-page {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #f9fbfc;
|
|
|
+ .space-layout {
|
|
|
+ margin-top: 20upx;
|
|
|
+ }
|
|
|
+ .space-remark {
|
|
|
+ margin-top: 1px;
|
|
|
+ }
|
|
|
+ .space-view {
|
|
|
+ display: flex;
|
|
|
+ padding: 30upx;
|
|
|
+ background-color: #fff;
|
|
|
+ .space-left {
|
|
|
+ flex: 1.5;
|
|
|
+ .title-bar {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .title-icon {
|
|
|
+ margin-right: 20upx;
|
|
|
+ width: 36upx;
|
|
|
+ height: 36upx;
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ font-size: 28upx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .space-right {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .show-item {
|
|
|
+ .show-name {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 24upx;
|
|
|
+ font-weight: 400;
|
|
|
+ .iconfont {
|
|
|
+ margin-left: 10upx;
|
|
|
+ color: $mainColor;
|
|
|
+ font-size: 30upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .show-value {
|
|
|
+ margin-top: 20upx;
|
|
|
+ color: #999999;
|
|
|
+
|
|
|
+ font-size: 36upx;
|
|
|
+ font-weight: bold;
|
|
|
+ .unit {
|
|
|
+ margin-right: 5upx;
|
|
|
+ font-size: 24upx;
|
|
|
+ }
|
|
|
+ &.red {
|
|
|
+ color: $redColor;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .show-tag {
|
|
|
+ margin-top: 10upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ &.up {
|
|
|
+ color: $redColor;
|
|
|
+ .tag {
|
|
|
+ background-color: $redColor;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.down {
|
|
|
+ color: $mainColor1;
|
|
|
+ .tag {
|
|
|
+ background-color: $mainColor1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .arrow {
|
|
|
+ transform: rotate(180deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tag {
|
|
|
+ margin-right: 10upx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 80upx;
|
|
|
+ height: 30upx;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 4upx;
|
|
|
+ font-size: 22upx;
|
|
|
+ }
|
|
|
+ .arrow {
|
|
|
+ margin-left: 10upx;
|
|
|
+ width: 13upx;
|
|
|
+ height: 19upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .business-list {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding: 30upx;
|
|
|
+ width: 100%;
|
|
|
+ .list-tab {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-radius: 8upx;
|
|
|
+ overflow: hidden;
|
|
|
+ border: 1px solid $mainColor;
|
|
|
+
|
|
|
+ .tab-item {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ height: 60upx;
|
|
|
+
|
|
|
+ background: #ffffff;
|
|
|
+
|
|
|
+ color: $mainColor;
|
|
|
+ &:not(:last-child) {
|
|
|
+ border-right: 1px solid $mainColor;
|
|
|
+ }
|
|
|
+ &.active {
|
|
|
+ color: #fff;
|
|
|
+ background-color: $mainColor;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-main {
|
|
|
+ margin-top: 20upx;
|
|
|
+ width: 100%;
|
|
|
+ .list-item {
|
|
|
+ &:not(:last-child) {
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+ }
|
|
|
+ padding: 30upx 0;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .item-left {
|
|
|
+ flex: 1;
|
|
|
+ .content-row {
|
|
|
+ .content-label {
|
|
|
+ font-size: 28upx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ .content-value {
|
|
|
+ margin-left: 20upx;
|
|
|
+ font-size: 28upx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #333333;
|
|
|
+ .unit {
|
|
|
+ font-size: 24upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-right {
|
|
|
+ flex-shrink: 0;
|
|
|
+ .iconfont {
|
|
|
+ font-size: 28upx;
|
|
|
+ color: #bbbbbb;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .business-info {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 300upx;
|
|
|
+ padding: 30upx;
|
|
|
+ // background: linear-gradient(30deg, #3ab7ff, #38a6ff, #3386ff);
|
|
|
+ background: url(../../../static/images/admin/bg2.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ .amount-view {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .amount-btn {
|
|
|
+ border: 1px solid #ffffff;
|
|
|
+ border-radius: 22px;
|
|
|
+ padding: 0px 17px;
|
|
|
+ height: 44px;
|
|
|
+ line-height: 44px;
|
|
|
+ font-size: 24px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ffffff;
|
|
|
+ // margin: 0 10px;
|
|
|
+
|
|
|
+ .iconfont {
|
|
|
+ margin-left: 20upx;
|
|
|
+ font-size: 25px;
|
|
|
+ padding-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .price-view {
|
|
|
+ margin-top: 10upx;
|
|
|
+ .unit {
|
|
|
+ font-size: 24upx;
|
|
|
+ font-family: DIN Alternate;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .price {
|
|
|
+ font-size: 60upx;
|
|
|
+ font-family: DIN Alternate;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .down-view {
|
|
|
+ display: flex;
|
|
|
+ margin-top: 30upx;
|
|
|
+
|
|
|
+ .down-item {
|
|
|
+ position: relative;
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ &:nth-child(2) {
|
|
|
+ padding-left: 60upx;
|
|
|
+ &:after {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ content: "";
|
|
|
+ width: 1px;
|
|
|
+ height: 70upx;
|
|
|
+ background-color: #dddddd;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .label {
|
|
|
+ font-size: 24upx;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+ .value {
|
|
|
+ margin-top: 20upx;
|
|
|
+ font-size: 32upx;
|
|
|
+ font-family: DIN Alternate;
|
|
|
+ font-weight: bold;
|
|
|
+ .unit {
|
|
|
+ font-size: 24upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
zhengxin
