|
|
@@ -9,67 +9,44 @@
|
|
|
<block v-else>
|
|
|
<view class="app-main app-content" v-if="loginStyle == 2">
|
|
|
<template v-if="lookMoney == 1">
|
|
|
- <view class="user-wrap" :style="{ backgroundImage: `url(${constant.imgUrl}/home/bg_hd_home2.png)` }">
|
|
|
- <view class="user-top">
|
|
|
- <view class="app-size-28">今日概况</view>
|
|
|
+ <view class="today-overview-card">
|
|
|
+ <view class="today-header">
|
|
|
+ <view class="today-title">今日概况</view>
|
|
|
+ <view class="today-date">{{ todayDate }}</view>
|
|
|
</view>
|
|
|
- <view class="income-amount" @click="pageTo({url:'/admin/stat/kdIncome'})">
|
|
|
- <view>收入</view>
|
|
|
- <view class="price">{{ $util.numberFormat(data.todayData.income) }}</view>
|
|
|
+
|
|
|
+ <view class="today-income-section" @click="pageTo({url:'/admin/stat/kdIncome'})">
|
|
|
+ <view class="income-label">今日收入</view>
|
|
|
+ <view class="income-value">
|
|
|
+ <text class="currency-symbol">¥</text>
|
|
|
+ <text class="income-number">{{ $util.numberFormat(data.todayData.income) }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="income-hint">点击查看详情</view>
|
|
|
</view>
|
|
|
- <view class="user-bottom">
|
|
|
- <view class="info-list">
|
|
|
- <view class="info-list-name">访客</view>
|
|
|
- <view class="info-list-value">
|
|
|
- {{ $util.numberFormat(data.todayData.visit) || 0 }}
|
|
|
+
|
|
|
+ <view class="today-stats">
|
|
|
+ <view class="stat-item">
|
|
|
+ <view class="stat-content">
|
|
|
+ <view class="stat-value">{{ $util.numberFormat(data.todayData.visit) || 0 }}</view>
|
|
|
+ <view class="stat-label">访客</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <navigator url="/admin/home/order" open-type="switchTab" class="info-list">
|
|
|
- <view class="info-list-name">订单</view>
|
|
|
- <view class="info-list-value">
|
|
|
- {{ $util.numberFormat(data.todayData.order) || 0 }}
|
|
|
+
|
|
|
+ <navigator url="/admin/home/order" open-type="switchTab" class="stat-item">
|
|
|
+ <view class="stat-content">
|
|
|
+ <view class="stat-value">{{ $util.numberFormat(data.todayData.order) || 0 }}</view>
|
|
|
+ <view class="stat-label">订单</view>
|
|
|
</view>
|
|
|
</navigator>
|
|
|
- <view class="info-list">
|
|
|
- <view class="info-list-name">昨天</view>
|
|
|
- <view class="info-list-value">
|
|
|
- {{ $util.numberFormat(0) || 0 }}
|
|
|
+
|
|
|
+ <view class="stat-item">
|
|
|
+ <view class="stat-content">
|
|
|
+ <view class="stat-value">{{ $util.numberFormat(yesterdayIncome) || 0 }}</view>
|
|
|
+ <view class="stat-label">昨日收入</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="module-com order-wrap" @click="pageTo({url:'/admin/stat/kdIncome'})">
|
|
|
- <view class="total-blo">
|
|
|
- <view class="total-list2">
|
|
|
- <view class="app-color-3">系统收款</view>
|
|
|
- <view class="list-num">
|
|
|
- <view>{{countStat.systemCount||0}}</view>
|
|
|
- <view>{{countStat.systemIncome?parseFloat(countStat.systemIncome):0}}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="total-list2">
|
|
|
- <view class="app-color-3">线下微信</view>
|
|
|
- <view class="list-num">
|
|
|
- <view>{{countStat.kfWxCount||0}}</view>
|
|
|
- <view>{{countStat.kfWxIncome?parseFloat(countStat.kfWxIncome):0}}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="total-list2">
|
|
|
- <view class="app-color-3">现金</view>
|
|
|
- <view class="list-num">
|
|
|
- <view>{{countStat.cashCount||0}}</view>
|
|
|
- <view>{{countStat.cashIncome?parseFloat(countStat.cashIncome):0}}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="total-list2">
|
|
|
- <view class="app-color-3">赊账</view>
|
|
|
- <view class="list-num">
|
|
|
- <view>{{countStat.debtCount||0}}</view>
|
|
|
- <view>{{countStat.debtIncome?parseFloat(countStat.debtIncome):0}}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
</template>
|
|
|
<view class="module-com news-wrap">
|
|
|
<view class="news-list" v-for="(item, index) in data.notice" :key="index" @click="noticeFn(item)" >
|
|
|
@@ -88,35 +65,148 @@
|
|
|
请先设置充值活动的规则
|
|
|
<text style="color:#3385ff;text-decoration: underline;margin-left:10upx;">去设置</text>
|
|
|
</view>
|
|
|
-
|
|
|
<view v-if="!$util.isEmpty(data.warning)" style="color:red;font-size:36upx;font-weight:bold;text-align: center;margin-bottom:15upx;">{{ data.warning }}</view>
|
|
|
- <view class="module-com">
|
|
|
- <view class="tabs-head_bx">
|
|
|
- <image @click="goKjKd()" :src="lskd1" mode="widthFix"></image>
|
|
|
- <image @click="goShKd()" :src="lskd2" mode="widthFix"></image>
|
|
|
+
|
|
|
+ <view class="module-com flower-module">
|
|
|
+ <!-- 花束花礼 -->
|
|
|
+ <view class="flower-section">
|
|
|
+ <view class="section-header">
|
|
|
+ <view class="header-line"></view>
|
|
|
+ <view class="header-title">花束花礼</view>
|
|
|
+ <view class="header-line"></view>
|
|
|
+ </view>
|
|
|
+ <view class="icon-grid">
|
|
|
+ <view class="icon-item" @click="goPage({url: '/admin/cg/mall'})">
|
|
|
+ <view class="icon-wrapper">
|
|
|
+ <image class="icon-image" :src="`${constant.hostUrl}/image/ghs/home/shop2.png`" mode="aspectFit"></image>
|
|
|
+ </view>
|
|
|
+ <view class="icon-text">商城</view>
|
|
|
+ </view>
|
|
|
+ <view class="icon-item" @click="goPage({url: '/admin/goods/list'})">
|
|
|
+ <view class="icon-wrapper">
|
|
|
+ <image class="icon-image" :src="`${constant.hostUrl}/image/ghs/home/shop2.png`" mode="aspectFit"></image>
|
|
|
+ </view>
|
|
|
+ <view class="icon-text">图集</view>
|
|
|
+ </view>
|
|
|
+ <view class="icon-item" @click="goPage({url: '/admin/order/workOrder'})">
|
|
|
+ <view class="icon-wrapper">
|
|
|
+ <image class="icon-image" :src="`${constant.hostUrl}/image/ghs/home/shop2.png`" mode="aspectFit"></image>
|
|
|
+ </view>
|
|
|
+ <view class="icon-text">开单</view>
|
|
|
+ </view>
|
|
|
+ <view class="icon-item" @click="goPage({url: '/admin/order/quickOrder'})">
|
|
|
+ <view class="icon-wrapper">
|
|
|
+ <image class="icon-image" :src="`${constant.hostUrl}/image/ghs/home/shop2.png`" mode="aspectFit"></image>
|
|
|
+ </view>
|
|
|
+ <view class="icon-text">快捷开单</view>
|
|
|
+ </view>
|
|
|
+ <view class="icon-item" @click="goPage({url: '/admin/work/list'})">
|
|
|
+ <view class="icon-wrapper">
|
|
|
+ <image class="icon-image" :src="`${constant.hostUrl}/image/ghs/home/shop2.png`" mode="aspectFit"></image>
|
|
|
+ </view>
|
|
|
+ <view class="icon-text">任务</view>
|
|
|
+ </view>
|
|
|
+ <view class="icon-item" @click="goPage({url: '/admin/item/list2'})">
|
|
|
+ <view class="icon-wrapper">
|
|
|
+ <image class="icon-image" :src="`${constant.hostUrl}/image/ghs/home/shop2.png`" mode="aspectFit"></image>
|
|
|
+ </view>
|
|
|
+ <view class="icon-text">接花束</view>
|
|
|
+ </view>
|
|
|
+ <view class="icon-item" @click="goPage({url: '/admin/item/list2'})">
|
|
|
+ <view class="icon-wrapper">
|
|
|
+ <image class="icon-image" :src="`${constant.hostUrl}/image/ghs/home/shop2.png`" mode="aspectFit"></image>
|
|
|
+ </view>
|
|
|
+ <view class="icon-text">花束管理</view>
|
|
|
+ </view>
|
|
|
+ <view class="icon-item" @click="goPage({url: '/admin/item/addGroup'})">
|
|
|
+ <view class="icon-wrapper">
|
|
|
+ <image class="icon-image" :src="`${constant.hostUrl}/image/ghs/home/shop2.png`" mode="aspectFit"></image>
|
|
|
+ </view>
|
|
|
+ <view class="icon-text">添加花束</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="tabs-wrap">
|
|
|
- <view class="tabs-list" v-for="(item, index) in tabsData" :key="index" >
|
|
|
- <view @click="goPage(item)">
|
|
|
- <view class="tabs-img">
|
|
|
- <img :src="`${constant.hostUrl}/image/${item.img}`" alt mode="widthFix" />
|
|
|
+
|
|
|
+ <!-- 盆栽花材 -->
|
|
|
+ <view class="flower-section">
|
|
|
+ <view class="section-header">
|
|
|
+ <view class="header-line"></view>
|
|
|
+ <view class="header-title">盆栽花材</view>
|
|
|
+ <view class="header-line"></view>
|
|
|
+ </view>
|
|
|
+ <view class="icon-grid">
|
|
|
+ <view class="icon-item" @click="goPage({url: '/admin/cg/mall'})">
|
|
|
+ <view class="icon-wrapper">
|
|
|
+ <image class="icon-image" :src="`${constant.hostUrl}/image/ghs/home/shop2.png`" mode="aspectFit"></image>
|
|
|
+ </view>
|
|
|
+ <view class="icon-text">商城</view>
|
|
|
+ </view>
|
|
|
+ <view class="icon-item" @click="goPage({url: '/admin/changePrice/list2'})">
|
|
|
+ <view class="icon-wrapper">
|
|
|
+ <image class="icon-image" :src="`${constant.hostUrl}/image/ghs/home/shop2.png`" mode="aspectFit"></image>
|
|
|
+ </view>
|
|
|
+ <view class="icon-text">改价</view>
|
|
|
+ </view>
|
|
|
+ <view class="icon-item" @click="goPage({url: '/admin/order/workOrder'})">
|
|
|
+ <view class="icon-wrapper">
|
|
|
+ <image class="icon-image" :src="`${constant.hostUrl}/image/ghs/home/shop2.png`" mode="aspectFit"></image>
|
|
|
+ </view>
|
|
|
+ <view class="icon-text">开单</view>
|
|
|
+ </view>
|
|
|
+ <view class="icon-item" @click="goPage({url: '/admin/order/quickOrder'})">
|
|
|
+ <view class="icon-wrapper">
|
|
|
+ <image class="icon-image" :src="`${constant.hostUrl}/image/ghs/home/shop2.png`" mode="aspectFit"></image>
|
|
|
+ </view>
|
|
|
+ <view class="icon-text">快捷开单</view>
|
|
|
+ </view>
|
|
|
+ <view class="icon-item" @click="goPage({url: '/admin/part/list'})">
|
|
|
+ <view class="icon-wrapper">
|
|
|
+ <image class="icon-image" :src="`${constant.hostUrl}/image/ghs/home/shop2.png`" mode="aspectFit"></image>
|
|
|
+ </view>
|
|
|
+ <view class="icon-text">拆散</view>
|
|
|
+ </view>
|
|
|
+ <view class="icon-item" @click="goPage({url: '/admin/breakage/list'})">
|
|
|
+ <view class="icon-wrapper">
|
|
|
+ <image class="icon-image" :src="`${constant.hostUrl}/image/ghs/home/shop2.png`" mode="aspectFit"></image>
|
|
|
+ </view>
|
|
|
+ <view class="icon-text">损耗</view>
|
|
|
+ </view>
|
|
|
+ <view class="icon-item" @click="goPage({url: '/admin/item/list2'})">
|
|
|
+ <view class="icon-wrapper">
|
|
|
+ <image class="icon-image" :src="`${constant.hostUrl}/image/ghs/home/shop2.png`" mode="aspectFit"></image>
|
|
|
+ </view>
|
|
|
+ <view class="icon-text">花材列表</view>
|
|
|
+ </view>
|
|
|
+ <view class="icon-item" @click="goPage({url: '/pagesPurchase/order'})">
|
|
|
+ <view class="icon-wrapper">
|
|
|
+ <image class="icon-image" :src="`${constant.hostUrl}/image/ghs/home/shop2.png`" mode="aspectFit"></image>
|
|
|
</view>
|
|
|
- <view class="tabs-name">{{ item.name }}</view>
|
|
|
+ <view class="icon-text">买花</view>
|
|
|
+ </view>
|
|
|
+ <view class="icon-item" @click="goPage({url: '/pagesPurchase/shopping'})">
|
|
|
+ <view class="icon-wrapper">
|
|
|
+ <image class="icon-image" :src="`${constant.hostUrl}/image/ghs/home/shop2.png`" mode="aspectFit"></image>
|
|
|
+ </view>
|
|
|
+ <view class="icon-text">买花记录</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+
|
|
|
<template v-if="lookMoney == 1">
|
|
|
- <view class="module-com total-wrap">
|
|
|
- <view class="total-tit">总览</view>
|
|
|
- <view class="total-blo">
|
|
|
- <view class="total-list" v-for="(item, index) in overview" :key="index" @click="pageTo(item)">
|
|
|
- <view class="list-num">{{ $util.numberFormat(item.value) }}</view>
|
|
|
- <view class="app-color-3">{{ item.name }}</view>
|
|
|
+ <view class="module-com overview-module">
|
|
|
+ <view class="overview-header">
|
|
|
+ <view class="overview-title">总览</view>
|
|
|
+ </view>
|
|
|
+ <view class="overview-grid">
|
|
|
+ <view class="overview-item" v-for="(item, index) in overview" :key="index" @click="pageTo(item)">
|
|
|
+ <view class="item-value">{{ $util.numberFormat(item.value) }}</view>
|
|
|
+ <view class="item-label">{{ item.name }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
+
|
|
|
</view>
|
|
|
<view class="order-page" v-else>
|
|
|
<view class="ghs_list_page flex-col">
|
|
|
@@ -317,9 +407,11 @@ export default {
|
|
|
admin: {},
|
|
|
asset: {},
|
|
|
notice: {},
|
|
|
- todayData: { income:0.00, order:0, custom:0, expend:0.00 },
|
|
|
+ todayData: { income:0.00, order:0, custom:0, expend:0.00, visit:0 },
|
|
|
isMini:0
|
|
|
},
|
|
|
+ yesterdayIncome: 0,
|
|
|
+
|
|
|
tabsData: [
|
|
|
{ name: "商城", img: `ghs/home/shop2.png`, url: "/admin/cg/mall",pf:1},
|
|
|
{ name: "改价", img: `ghs/home/gj2.png`, url: "/admin/changePrice/list2",pf:1},
|
|
|
@@ -356,7 +448,15 @@ export default {
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
- ...mapGetters({ loginInfo: "getLoginInfo",dictInfo:"getDictionariesInfo",myShopInfo:"getMyShopInfo" })
|
|
|
+ ...mapGetters({ loginInfo: "getLoginInfo",dictInfo:"getDictionariesInfo",myShopInfo:"getMyShopInfo" }),
|
|
|
+ todayDate() {
|
|
|
+ const date = new Date()
|
|
|
+ const month = date.getMonth() + 1
|
|
|
+ const day = date.getDate()
|
|
|
+ const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
|
|
|
+ const weekday = weekdays[date.getDay()]
|
|
|
+ return `${month}月${day}日 ${weekday}`
|
|
|
+ }
|
|
|
},
|
|
|
watch: {
|
|
|
//只需要采购花材的花店不显示底部菜单
|
|
|
@@ -669,10 +769,6 @@ export default {
|
|
|
let that = this
|
|
|
consoleIndex({isMini:this.isMini}).then(res => {
|
|
|
this.data = res.data
|
|
|
-
|
|
|
- if(res.data.menu && !this.$util.isEmpty(res.data.menu)){
|
|
|
- this.tabsData = res.data.menu
|
|
|
- }
|
|
|
this.lookMoney = res.data.lookMoney
|
|
|
})
|
|
|
|
|
|
@@ -735,6 +831,129 @@ export default {
|
|
|
margin-bottom: 20upx;
|
|
|
background-color: #fff;
|
|
|
}
|
|
|
+
|
|
|
+// 今日概况卡片
|
|
|
+.today-overview-card {
|
|
|
+ background: #ffffff;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0 0 20upx 0;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .today-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 30upx 30upx 20upx;
|
|
|
+ background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
|
|
|
+
|
|
|
+ .today-title {
|
|
|
+ font-size: 34upx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .today-date {
|
|
|
+ font-size: 26upx;
|
|
|
+ color: rgba(255, 255, 255, 0.9);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .today-income-section {
|
|
|
+ padding: 40upx 30upx;
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+ background: linear-gradient(180deg, #ffffff 0%, #f8fdfb 100%);
|
|
|
+ border-bottom: 1upx solid #f0f0f0;
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ background: linear-gradient(180deg, #f8fdfb 0%, #f0faf5 100%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .income-label {
|
|
|
+ font-size: 26upx;
|
|
|
+ color: #666;
|
|
|
+ margin-bottom: 16upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .income-value {
|
|
|
+ display: flex;
|
|
|
+ align-items: baseline;
|
|
|
+ justify-content: center;
|
|
|
+ margin-bottom: 12upx;
|
|
|
+
|
|
|
+ .currency-symbol {
|
|
|
+ font-size: 32upx;
|
|
|
+ color: #22C55E;
|
|
|
+ font-weight: 500;
|
|
|
+ margin-right: 8upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .income-number {
|
|
|
+ font-size: 56upx;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #22C55E;
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .income-hint {
|
|
|
+ font-size: 24upx;
|
|
|
+ color: #22C55E;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ content: '>';
|
|
|
+ margin-left: 8upx;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .today-stats {
|
|
|
+ display: flex;
|
|
|
+ padding: 30upx 30upx;
|
|
|
+
|
|
|
+ .stat-item {
|
|
|
+ flex: 1;
|
|
|
+ padding: 20upx 0;
|
|
|
+ position: relative;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ &:not(:last-child)::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ width: 1upx;
|
|
|
+ height: 60upx;
|
|
|
+ background: #f0f0f0;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+
|
|
|
+ .stat-content {
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .stat-value {
|
|
|
+ font-size: 36upx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 8upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .stat-label {
|
|
|
+ font-size: 26upx;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
.user-wrap {
|
|
|
padding: 20upx 30upx 34upx 30upx;
|
|
|
color: #fff;
|
|
|
@@ -825,86 +1044,156 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-// 总览
|
|
|
-.total-wrap,
|
|
|
-.order-wrap {
|
|
|
- .total-tit {
|
|
|
- padding: 18upx 0 18upx 20upx;
|
|
|
- border-bottom: 1upx solid $borderColor;
|
|
|
- font-weight: 600;
|
|
|
- font-size: 24upx;
|
|
|
- color: #333333;
|
|
|
- }
|
|
|
- .total-blo {
|
|
|
- @include disFlex(center, space-between);
|
|
|
- flex-wrap: wrap;
|
|
|
- padding: 20upx 0 0;
|
|
|
- .total-list {
|
|
|
- width: 33%;
|
|
|
- text-align: center;
|
|
|
- margin: 20upx 0upx;
|
|
|
- border-right: 1upx solid $borderColor;
|
|
|
- .list-num {
|
|
|
- margin-bottom: 8upx;
|
|
|
- font-size:26upx;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- }
|
|
|
- .total-list:nth-child(3n) {
|
|
|
- border-right: none;
|
|
|
- }
|
|
|
- .total-list:nth-child(n + 4) {
|
|
|
- padding-bottom: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .total-list2 {
|
|
|
- width: 24%;
|
|
|
- text-align: center;
|
|
|
- margin: 20upx 0upx;
|
|
|
- border-right: 1upx solid $borderColor;
|
|
|
- .list-num {
|
|
|
- margin-top:10upx;
|
|
|
- margin-bottom:8upx;
|
|
|
- font-size:26upx;
|
|
|
- font-weight:normal;
|
|
|
- }
|
|
|
- }
|
|
|
- .total-list2:nth-child(4n) {
|
|
|
- border-right: none;
|
|
|
- }
|
|
|
- .total-list2:nth-child(n + 4) {
|
|
|
- padding-bottom: 0;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-}
|
|
|
-.tabs-head_bx {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding: 20upx 15upx;
|
|
|
-}
|
|
|
-.tabs-wrap {
|
|
|
- padding: 20upx 10upx;
|
|
|
- @include disFlex(center, flex-start);
|
|
|
- flex-wrap: wrap;
|
|
|
- .tabs-list {
|
|
|
- width: 25%;
|
|
|
- margin-top: 50upx;
|
|
|
- text-align: center;
|
|
|
- .tabs-img {
|
|
|
- width: 100upx;
|
|
|
- height: 100upx;
|
|
|
- margin: 0 auto;
|
|
|
- img {
|
|
|
- height: 100%;
|
|
|
+// 数据总览模块
|
|
|
+.overview-module {
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 16upx;
|
|
|
+ padding: 0;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .overview-header {
|
|
|
+ background: linear-gradient(135deg, #f8fafb 0%, #ffffff 100%);
|
|
|
+ padding: 30upx 30upx 20upx;
|
|
|
+ border-bottom: 1upx solid #f0f0f0;
|
|
|
+
|
|
|
+ .overview-title {
|
|
|
+ font-size: 32upx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 8upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .overview-subtitle {
|
|
|
+ font-size: 24upx;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .overview-grid {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding: 10upx;
|
|
|
+
|
|
|
+ .overview-item {
|
|
|
+ width: 33.33%;
|
|
|
+ padding: 30upx 0;
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+
|
|
|
+ &:not(:nth-child(3n)) {
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ width: 1upx;
|
|
|
+ height: 60upx;
|
|
|
+ background: #f0f0f0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(n+4) {
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ left: 15%;
|
|
|
+ right: 15%;
|
|
|
+ top: 0;
|
|
|
+ height: 1upx;
|
|
|
+ background: #f0f0f0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ background: #f8fafb;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-value {
|
|
|
+ font-size: 36upx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #22C55E;
|
|
|
+ margin-bottom: 10upx;
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-label {
|
|
|
+ font-size: 26upx;
|
|
|
+ color: #666;
|
|
|
+ line-height: 1;
|
|
|
}
|
|
|
}
|
|
|
- .tabs-name {
|
|
|
- color: #444444;
|
|
|
- margin-top: 10upx;
|
|
|
+ }
|
|
|
+}
|
|
|
+// 新的花束花礼和盆栽花材样式
|
|
|
+.flower-module {
|
|
|
+ padding: 0;
|
|
|
+
|
|
|
+ .flower-section {
|
|
|
+ padding: 30upx 20upx;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .section-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-bottom: 30upx;
|
|
|
+
|
|
|
+ .header-line {
|
|
|
+ flex: 1;
|
|
|
+ height: 1upx;
|
|
|
+ background: linear-gradient(to right, transparent, #e0e0e0);
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ background: linear-gradient(to left, transparent, #e0e0e0);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-title {
|
|
|
+ padding: 0 30upx;
|
|
|
+ font-size: 32upx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
}
|
|
|
- &:nth-child(-n + 4) {
|
|
|
- margin-top: 0;
|
|
|
+
|
|
|
+ .icon-grid {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin: -10upx;
|
|
|
+
|
|
|
+ .icon-item {
|
|
|
+ width: 25%;
|
|
|
+ padding: 10upx;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .icon-wrapper {
|
|
|
+ width: 120upx;
|
|
|
+ height: 120upx;
|
|
|
+ margin: 0 auto 4upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ transform: scale(0.95);
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-image {
|
|
|
+ width: 95upx;
|
|
|
+ height: 95upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-text {
|
|
|
+ font-size: 26upx;
|
|
|
+ color: #333;
|
|
|
+ line-height: 1.2;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
