1287 lines
26 KiB
Vue
1287 lines
26 KiB
Vue
<template>
|
||
<view class="container">
|
||
|
||
<view class="one">
|
||
<view class="barsOne" @click="showDrawer('showLeft')" ><uni-icons type="bars" size="30" class="barsIcons"></uni-icons></view>
|
||
<view class="scanOne"><uni-icons type="scan" size="30" class="scanIcons"></uni-icons></view>
|
||
<view class="gearOne" @click="goSetting"><uni-icons type="gear" size="30" class="gearIcons"></uni-icons></view>
|
||
</view>
|
||
|
||
<!-- 左侧抽屉 -->
|
||
<uni-drawer ref="showLeft" mode="left" :width="320" @change="change($event,'showLeft')">
|
||
<!-- 替换后的抽屉内容 -->
|
||
<!-- 顶部个人信息区 -->
|
||
<view class="drawer-header">
|
||
<image class="avatar" src="/static/avatar.png" mode="widthFix"></image>
|
||
<view class="name-wrap" @click="goToUser">
|
||
<text class="user-name">名称</text>
|
||
<text class="arrow">></text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 个人店模块 -->
|
||
<view class="section">
|
||
<text class="section-title">个人店</text>
|
||
<!-- 绑定点击事件和动态active类 -->
|
||
<view class="shop-item" :class="{active: selectedShop === 'personal'}" @click="selectShop('personal')">
|
||
<image class="shop-icon" src="/static/shop.png" mode="widthFix"></image>
|
||
<view class="shop-info">
|
||
<text class="shop-name">微店智能店</text>
|
||
<text class="shop-id">ID:1234567890 | 管理员</text>
|
||
</view>
|
||
<uni-icons type="checkbox-filled" size="18" color="#FF9900" v-if="selectedShop === 'personal'"></uni-icons>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 企业管理模块 -->
|
||
<view class="section">
|
||
<text class="section-title">企业管理</text>
|
||
<!-- 绑定点击事件和动态active类 -->
|
||
<view class="shop-item" :class="{active: selectedShop === 'enterprise'}" @click="selectShop('enterprise')">
|
||
<image class="shop-icon" src="/static/shop.png" mode="widthFix"></image>
|
||
<view class="shop-info">
|
||
<text class="shop-name">企业名称</text>
|
||
<text class="shop-id">总部/管理员</text>
|
||
</view>
|
||
<uni-icons type="checkbox-filled" size="18" color="#FF9900" v-if="selectedShop === 'enterprise'"></uni-icons>
|
||
</view>
|
||
<view class="create-btn" @click="createQi">
|
||
<uni-icons type="plusempty" size="16" ></uni-icons>
|
||
<text class="create-text">创建企业组织</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部创建店铺按钮 -->
|
||
<view class="bottom-create-btn" @click="createDian">
|
||
<uni-icons type="plusempty" size="16"></uni-icons>
|
||
<text class="create-text">创建店铺</text>
|
||
</view>
|
||
</uni-drawer>
|
||
|
||
<!-- 顶部状态栏 -->
|
||
<view class="page-wrapper">
|
||
<view class="function-gridss">
|
||
<view class="two">
|
||
<view class="shop-icons">
|
||
<image
|
||
src="http://193.112.94.36:8099/static/images/Frame 8.png"
|
||
class="shop-icon"
|
||
mode="aspectFit"
|
||
/>
|
||
</view>
|
||
|
||
|
||
<!-- 中间：店铺信息和状态 -->
|
||
<view class="status-center">
|
||
<view class="store-name" >{{ storeName }}</view>
|
||
<view class="status-info">
|
||
<text class="status-text">值守中</text>
|
||
<view class="status-dot"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="xianjin">
|
||
<image
|
||
src="http://193.112.94.36:8099/static/images/Frame 75.png"
|
||
mode="aspectFit"
|
||
class="close-icon"
|
||
|
||
/>
|
||
</view>
|
||
|
||
<view class="closeView">
|
||
<!-- 右侧：关闭按钮图片 -->
|
||
<image
|
||
src="http://193.112.94.36:8099/static/images/Frame 7.png"
|
||
class="close-icons"
|
||
mode="aspectFit"
|
||
@click="closeDuty"
|
||
/>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
|
||
|
||
<!-- 关键分割线：状态栏下方 -->
|
||
<view class="main-divider"></view>
|
||
<!-- 页面内容（第二张图片的布局） -->
|
||
<view class="stats">
|
||
<view class="stat-item">
|
||
<text class="stat-value">0</text>
|
||
<text class="stat-label">今日进店</text>
|
||
</view>
|
||
<view class="stat-item">
|
||
<text class="stat-value">0</text>
|
||
<text class="stat-label">支付订单</text>
|
||
</view>
|
||
<view class="stat-item">
|
||
<text class="stat-value">0</text>
|
||
<text class="stat-label">支付金额</text>
|
||
</view>
|
||
<view class="stat-item">
|
||
<text class="stat-value"><uni-icons type="redo-filled" size="30"></uni-icons></text>
|
||
<text class="stat-label">分享</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<view class="page-wrapper">
|
||
|
||
<!-- 顶部状态栏 - 图片版本 -->
|
||
<view class="function-grids">
|
||
<view >
|
||
<text class="daiBan">待办</text>
|
||
<text class="daiBan1">店铺暂未投保</text>
|
||
<text class="daiBan2">去认证 ></text>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
|
||
<!-- 主要功能区域 -->
|
||
<view class="main-content">
|
||
<!-- 功能网格1 -->
|
||
<view class="function-grid">
|
||
<view class="grid-item" @click="navigateTo('商品管理')">
|
||
<view class="item-icon" @click="goToProduct">
|
||
|
||
</view>
|
||
<text class="item-text">商品管理</text>
|
||
|
||
</view>
|
||
<view class="grid-item" @click="navigateTo('订单')">
|
||
<view class="item-iconb" @click="goToBack">
|
||
|
||
</view>
|
||
<text class="item-text">订单</text>
|
||
</view>
|
||
<view class="grid-item" @click="navigateTo('收入资产')">
|
||
<view class="item-iconc" @click="goToAsset">
|
||
|
||
</view>
|
||
<text class="item-text">收入资产</text>
|
||
</view>
|
||
<view class="grid-item" @click="navigateTo('数据分析')">
|
||
<view class="item-icond">
|
||
|
||
</view>
|
||
<text class="item-text">数据分析</text>
|
||
</view>
|
||
|
||
<view class="grid-item" @click="navigateTo('实时监控')">
|
||
<view class="item-icone">
|
||
|
||
</view>
|
||
<text class="item-text">实时监控</text>
|
||
</view>
|
||
<view class="grid-item" @click="navigateTo('查看回放')">
|
||
<view class="item-iconf">
|
||
|
||
</view>
|
||
<text class="item-text">查看回放</text>
|
||
</view>
|
||
<view class="grid-item" @click="navigateTo('值班报告')">
|
||
<view class="item-icong">
|
||
|
||
</view>
|
||
<text class="item-text">值班报告</text>
|
||
</view>
|
||
<view class="grid-item" @click="navigateTo('服务费')">
|
||
<view class="item-iconh">
|
||
|
||
</view>
|
||
<text class="item-text">服务费</text>
|
||
</view>
|
||
<view class="grid-item" @click="navigateTo('门店信息')">
|
||
<view class="item-icon">
|
||
|
||
</view>
|
||
<text class="item-text">门店信息</text>
|
||
|
||
</view>
|
||
<view class="grid-item" @click="navigateTo('24商城')">
|
||
<view class="item-iconb">
|
||
|
||
</view>
|
||
<text class="item-text">24商城</text>
|
||
</view>
|
||
<view class="grid-item" @click="navigateTo('店铺保障')">
|
||
<view class="item-iconc">
|
||
|
||
</view>
|
||
<text class="item-text">店铺保障</text>
|
||
</view>
|
||
<view class="grid-item" @click="navigateTo('店铺设备')">
|
||
<view class="item-icond">
|
||
|
||
</view>
|
||
<text class="item-text">店铺设备</text>
|
||
</view>
|
||
<view class="grid-item" @click="navigateTo('值班留言')">
|
||
<view class="item-icon">
|
||
|
||
</view>
|
||
<text class="item-text">值班留言</text>
|
||
|
||
</view>
|
||
<view class="grid-item" @click="navigateTo('活动报名')">
|
||
<view class="item-iconb">
|
||
|
||
</view>
|
||
<text class="item-text">活动报名</text>
|
||
</view>
|
||
<view class="grid-item" @click="navigateTo('营销推广')">
|
||
<view class="item-iconc">
|
||
|
||
</view>
|
||
<text class="item-text">营销推广</text>
|
||
</view>
|
||
<view class="grid-item" @click="navigateTo('全部客户')">
|
||
<view class="item-icond">
|
||
|
||
</view>
|
||
<text class="item-text">全部客户</text>
|
||
</view>
|
||
<view class="grid-item" @click="navigateTo('安全卫士')">
|
||
<view class="item-icon">
|
||
|
||
</view>
|
||
<text class="item-text">安全卫士</text>
|
||
|
||
</view>
|
||
|
||
|
||
</view>
|
||
|
||
|
||
|
||
<!-- 收入预估卡片 -->
|
||
<view class="income-card" @click="gotoEstimate">
|
||
<view class="card-header">
|
||
<text class="card-title">预估店铺改造后收入</text>
|
||
<view class="card-badge">
|
||
<text class="badge-text">立即去预估</text>
|
||
<text class="arrow">→</text>
|
||
</view>
|
||
</view>
|
||
<view class="card-content">
|
||
<!-- 这里可以放置图表或收入预估数据 -->
|
||
<view class="placeholder-chart">
|
||
<text class="chart-icon">📈</text>
|
||
<text class="chart-text">收入增长趋势分析</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 推广标语 -->
|
||
<view class="promotion-banner">
|
||
<text class="promotion-text">把心意,做到生意里</text>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { getStoreInfo } from '@/utils/auth'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
// 可以在这里添加数据
|
||
showLeft: false,
|
||
storeName: '我的便利店', // 门店名称
|
||
selectedShop: 'personal' // 新增：默认选中个人店
|
||
}
|
||
},
|
||
onShow() {
|
||
// 获取门店信息
|
||
const storeInfo = getStoreInfo();
|
||
if (storeInfo && storeInfo.storeName) {
|
||
this.storeName = storeInfo.storeName;
|
||
}
|
||
},
|
||
methods: {
|
||
// 新增：切换选中店铺的方法
|
||
selectShop(type) {
|
||
this.selectedShop = type;
|
||
},
|
||
navigateTo(page) {
|
||
uni.showToast({
|
||
title: `跳转到${page}`,
|
||
icon: 'none'
|
||
})
|
||
// 实际开发中可以跳转到对应页面
|
||
// uni.navigateTo({
|
||
// url: `/pages/${page}/index`
|
||
// })
|
||
},
|
||
createQi(){
|
||
uni.showToast({
|
||
title: `模块建设中~`,
|
||
icon: 'none'
|
||
})
|
||
},
|
||
createDian(){
|
||
uni.showToast({
|
||
title: `模块建设中~`,
|
||
icon: 'none'
|
||
})
|
||
},
|
||
goToUser() {
|
||
uni.navigateTo({
|
||
url: '/pages/user/user'
|
||
})
|
||
},
|
||
goSetting(){
|
||
uni.navigateTo({
|
||
url: '/pages/settings/settings'
|
||
})
|
||
},
|
||
goToProduct() {
|
||
uni.navigateTo({
|
||
url: '/pages/product/product'
|
||
})
|
||
},
|
||
goToAsset() {
|
||
uni.navigateTo({
|
||
url: '/pages/asset/asset'
|
||
})
|
||
},
|
||
goToBack(){
|
||
uni.navigateTo({
|
||
url:'/pages/back/back'
|
||
})
|
||
},
|
||
// reLaunchToA() {
|
||
// uni.reLaunch({
|
||
// url: '/pages/a/a' // 关闭所有页面，打开新页面
|
||
// });
|
||
// },
|
||
confirm() {},
|
||
// 打开窗口
|
||
showDrawer(e) {
|
||
this.$refs[e].open()
|
||
},
|
||
// 关闭窗口
|
||
closeDrawer(e) {
|
||
this.$refs[e].close()
|
||
},
|
||
// 抽屉状态发生变化触发
|
||
change(e, type) {
|
||
console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
|
||
this[type] = e
|
||
},
|
||
gotoEstimate() {
|
||
uni.showToast({
|
||
title: '跳转到收入预估页面',
|
||
icon: 'none'
|
||
})
|
||
},
|
||
openMenu() {
|
||
this.$refs.drawer.open()
|
||
},
|
||
closeMenu() {
|
||
this.$refs.drawer.close()
|
||
}
|
||
},
|
||
onNavigationBarButtonTap(e) {
|
||
if (this.showLeft) {
|
||
this.$refs.showLeft.close()
|
||
} else {
|
||
this.$refs.showLeft.open()
|
||
}
|
||
},
|
||
// app端拦截返回事件 ，仅app端生效
|
||
onBackPress() {
|
||
if (this.showRight || this.showLeft) {
|
||
this.$refs.showLeft.close()
|
||
this.$refs.showRight.close()
|
||
return true
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import "@/static/scss/theme-variables.scss";
|
||
|
||
// 新增抽屉样式
|
||
.drawer-header {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 20px;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
.avatar {
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: 50%;
|
||
margin-right: 12px;
|
||
}
|
||
.name-wrap {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.user-name {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
}
|
||
.arrow {
|
||
font-size: 14px;
|
||
color: #999;
|
||
margin-left: 4px;
|
||
}
|
||
.section {
|
||
padding: 12px 0;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
.section-title {
|
||
font-size: 12px;
|
||
color: #999;
|
||
padding: 0 20px 8px;
|
||
}
|
||
.shop-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 12px 20px;
|
||
background: #f8f8f8;
|
||
cursor: pointer; // 新增：鼠标指针样式
|
||
transition: all 0.2s; // 新增：过渡动画
|
||
}
|
||
.shop-item.active {
|
||
background: #fff8e8;
|
||
border-right: 4px solid #ff9900;
|
||
}
|
||
// 新增：未选中项hover效果
|
||
.shop-item:not(.active):hover {
|
||
background: #f0f0f0;
|
||
}
|
||
.shop-icon {
|
||
width: 32px;
|
||
height: 32px;
|
||
margin-right: 12px;
|
||
}
|
||
.shop-info {
|
||
flex: 1;
|
||
}
|
||
.shop-name {
|
||
display: block;
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
margin-bottom: 2px;
|
||
}
|
||
.shop-id {
|
||
font-size: 12px;
|
||
color: #999;
|
||
}
|
||
.create-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 12px 20px;
|
||
color: #666;
|
||
font-size: 14px;
|
||
}
|
||
.create-text {
|
||
margin-left: 6px;
|
||
}
|
||
.bottom-create-btn {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 16px 0;
|
||
border-top: 1px solid #eee;
|
||
color: #666;
|
||
font-size: 14px;
|
||
background: #fff;
|
||
}
|
||
|
||
.one{
|
||
width: 100%;
|
||
height: 200rpx;
|
||
/* background-image: url("/static/images/banner/banner01.jpg"); */
|
||
background-color: firebrick;
|
||
box-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.02);
|
||
margin-bottom: 4rpx;
|
||
z-index: -1; /* 最底层 */
|
||
}
|
||
.barsOne{
|
||
position: absolute;
|
||
left: 38rpx;
|
||
top: 140rpx;
|
||
}
|
||
.scanOne{
|
||
position: absolute;
|
||
right: 100rpx;
|
||
top: 140rpx;
|
||
}
|
||
.gearOne{
|
||
position: absolute;
|
||
right: 38rpx;
|
||
top: 140rpx;
|
||
}
|
||
|
||
.barsIcons{
|
||
color: #ffffff !important;
|
||
}
|
||
.scanIcons{
|
||
color: #ffffff !important;
|
||
}
|
||
.gearIcons{
|
||
color: #ffffff !important;
|
||
}
|
||
|
||
/* H5平台自适应 */
|
||
/* #ifdef H5 */
|
||
@media (min-width: 751px) {
|
||
.barsOne{
|
||
position: absolute;
|
||
left: 38px;
|
||
top: 100px;
|
||
}
|
||
.scanOne{
|
||
position: absolute;
|
||
right: 100px;
|
||
top: 100px;
|
||
}
|
||
.gearOne{
|
||
position: absolute;
|
||
right: 38px;
|
||
top: 100px;
|
||
}
|
||
.barsIcons,
|
||
.scanIcons,
|
||
.gearIcons{
|
||
font-size: 30px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 750px) and (min-width: 601px) {
|
||
.barsOne{
|
||
position: absolute;
|
||
left: 30px;
|
||
top: 100px;
|
||
}
|
||
.scanOne{
|
||
position: absolute;
|
||
right: 80px;
|
||
top: 100px;
|
||
}
|
||
.gearOne{
|
||
position: absolute;
|
||
right: 30px;
|
||
top: 100px;
|
||
}
|
||
.barsIcons,
|
||
.scanIcons,
|
||
.gearIcons{
|
||
font-size: 26px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 600px) and (min-width: 401px) {
|
||
.barsOne{
|
||
position: absolute;
|
||
left: 25px;
|
||
top: 100px;
|
||
}
|
||
.scanOne{
|
||
position: absolute;
|
||
right: 65px;
|
||
top: 100px;
|
||
}
|
||
.gearOne{
|
||
position: absolute;
|
||
right: 25px;
|
||
top: 100px;
|
||
}
|
||
.barsIcons,
|
||
.scanIcons,
|
||
.gearIcons{
|
||
font-size: 24px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 400px) {
|
||
.barsOne{
|
||
position: absolute;
|
||
left: 20px;
|
||
top: 80px;
|
||
}
|
||
.scanOne{
|
||
position: absolute;
|
||
right: 50px;
|
||
top: 80px;
|
||
}
|
||
.gearOne{
|
||
position: absolute;
|
||
right: 20px;
|
||
top: 80px;
|
||
}
|
||
.barsIcons,
|
||
.scanIcons,
|
||
.gearIcons{
|
||
font-size: 22px;
|
||
}
|
||
}
|
||
/* #endif */
|
||
|
||
/* App平台自适应 */
|
||
/* #ifdef APP-PLUS */
|
||
@media (min-width: 751rpx) {
|
||
.barsOne{
|
||
position: absolute;
|
||
left: 38rpx;
|
||
top: 140rpx;
|
||
}
|
||
.scanOne{
|
||
position: absolute;
|
||
right: 100rpx;
|
||
top: 140rpx;
|
||
}
|
||
.gearOne{
|
||
position: absolute;
|
||
right: 38rpx;
|
||
top: 140rpx;
|
||
}
|
||
.barsIcons,
|
||
.scanIcons,
|
||
.gearIcons{
|
||
font-size: 30rpx;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 750rpx) and (min-width: 601rpx) {
|
||
.barsOne{
|
||
position: absolute;
|
||
left: 32rpx;
|
||
top: 120rpx;
|
||
}
|
||
.scanOne{
|
||
position: absolute;
|
||
right: 80rpx;
|
||
top: 120rpx;
|
||
}
|
||
.gearOne{
|
||
position: absolute;
|
||
right: 32rpx;
|
||
top: 120rpx;
|
||
}
|
||
.barsIcons,
|
||
.scanIcons,
|
||
.gearIcons{
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 600rpx) and (min-width: 401rpx) {
|
||
.barsOne{
|
||
position: absolute;
|
||
left: 26rpx;
|
||
top: 100rpx;
|
||
}
|
||
.scanOne{
|
||
position: absolute;
|
||
right: 65rpx;
|
||
top: 100rpx;
|
||
}
|
||
.gearOne{
|
||
position: absolute;
|
||
right: 26rpx;
|
||
top: 100rpx;
|
||
}
|
||
.barsIcons,
|
||
.scanIcons,
|
||
.gearIcons{
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 400rpx) {
|
||
.barsOne{
|
||
position: absolute;
|
||
left: 20rpx;
|
||
top: 80rpx;
|
||
}
|
||
.scanOne{
|
||
position: absolute;
|
||
right: 50rpx;
|
||
top: 80rpx;
|
||
}
|
||
.gearOne{
|
||
position: absolute;
|
||
right: 20rpx;
|
||
top: 80rpx;
|
||
}
|
||
.barsIcons,
|
||
.scanIcons,
|
||
.gearIcons{
|
||
font-size: 22rpx;
|
||
}
|
||
}
|
||
/* #endif */
|
||
.container {
|
||
background: var(--bg-primary);
|
||
padding: var(--spacing-md);
|
||
border-radius: var(--radius-md);
|
||
}
|
||
.section {
|
||
margin-bottom: 40rpx;
|
||
}
|
||
/* 顶部状态栏样式 */
|
||
.status-bar {
|
||
background: white;
|
||
border-radius: 16rpx;
|
||
padding: 30rpx;
|
||
margin-bottom: 30rpx;
|
||
display: flex;
|
||
/* justify-content: space-between; */
|
||
align-items: center;
|
||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
||
}
|
||
.imageClsoe{
|
||
height: 124rpx;
|
||
width:226rpx;
|
||
}
|
||
.page {
|
||
height: 100vh;
|
||
background: #f5f5f5;
|
||
}
|
||
.daiBan{
|
||
border: 2rpx solid red;
|
||
border-radius: 21%;
|
||
padding: 0rpx 10rpx;
|
||
color: red;
|
||
font-weight: bold;
|
||
}
|
||
.daiBan1{
|
||
padding: 0rpx 10rpx;
|
||
/* font-weight: bold; */
|
||
}
|
||
.daiBan2{
|
||
/* padding: 0rpx 270rpx; */
|
||
padding-left: 278rpx;
|
||
color: red;
|
||
/* font-weight: bold; */
|
||
}
|
||
.header {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 20rpx 30rpx;
|
||
background: #fff;
|
||
}
|
||
|
||
.back-btn {
|
||
font-size: 40rpx;
|
||
margin-right: 20rpx;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.stats {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
padding: 30rpx;
|
||
/* background: #fff; */
|
||
margin: -20rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.stat-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: 48rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 24rpx;
|
||
color: #888;
|
||
}
|
||
.imageDian{
|
||
height: 106rpx;
|
||
width: 106rpx;
|
||
}
|
||
.status-left {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.main-divider {
|
||
height: 1rpx;
|
||
background-color: darkgray;
|
||
margin: 16rpx 20rpx;
|
||
box-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.02);
|
||
}
|
||
|
||
.brand {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.store-name {
|
||
font-size: 28rpx;
|
||
margin-top: 2rpx;
|
||
}
|
||
|
||
.status-right {
|
||
display: flex;
|
||
/* flex-direction: column; */
|
||
/* align-items: flex-end; */
|
||
}
|
||
|
||
.status-tag {
|
||
background: #e8f5e9;
|
||
padding: 8rpx 20rpx;
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 15rpx;
|
||
}
|
||
|
||
.status-dot {
|
||
width: 12rpx;
|
||
height: 12rpx;
|
||
background: #4caf50;
|
||
border-radius: 50%;
|
||
margin-right: 10rpx;
|
||
}
|
||
.page-wrapper {
|
||
width: 100%;
|
||
/* min-height: 100vh; */
|
||
padding: 20rpx;
|
||
/* background-color: #f8f9fa; */
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 顶部状态栏 - 图片版本 */
|
||
.status-bar {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
border-radius: 0 0 20rpx 20rpx;
|
||
padding: 30rpx 30rpx 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-shadow: 0 4rpx 20rpx rgba(102, 126, 234, 0.3);
|
||
position: relative;
|
||
z-index: 10;
|
||
}
|
||
|
||
/* 左侧：店铺图标 */
|
||
.shop-icon {
|
||
width: 84rpx;
|
||
height: 94rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
.shop-icons{
|
||
padding-left: 18rpx;
|
||
}
|
||
/* 中间：店铺信息和状态 */
|
||
.status-center {
|
||
padding-left: 14rpx;
|
||
}
|
||
|
||
.store-name {
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
color: black;
|
||
margin-bottom: 14rpx;
|
||
text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.status-info {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10rpx;
|
||
}
|
||
|
||
.status-text {
|
||
font-size: 24rpx;
|
||
color: #333;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.status-dot {
|
||
width: 12rpx;
|
||
height: 12rpx;
|
||
background: #4caf50;
|
||
border-radius: 50%;
|
||
box-shadow: 0 0 8rpx rgba(76, 175, 80, 0.8);
|
||
animation: pulse 2s infinite;
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0% { opacity: 1; }
|
||
50% { opacity: 0.5; }
|
||
100% { opacity: 1; }
|
||
}
|
||
|
||
/* 右侧：关闭图标 */
|
||
.close-icon {
|
||
width: 70rpx;
|
||
height: 52rpx;
|
||
}
|
||
.close-icons {
|
||
width: 172rpx;
|
||
height: 98rpx;
|
||
padding: 2rpx;
|
||
}
|
||
|
||
.status-text {
|
||
font-size: 20rpx;
|
||
/* color: #4caf50; */
|
||
font-weight: 500;
|
||
}
|
||
|
||
.close-btn {
|
||
font-size: 24rpx;
|
||
color: #ff6b6b;
|
||
background: #ffeaea;
|
||
padding: 8rpx 20rpx;
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
/* 主要内容区域 */
|
||
.main-content {
|
||
flex: 1;
|
||
padding: 20rpx;
|
||
height: auto; /* 修复高度固定导致的滚动问题 */
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 功能网格样式 - 最终修复版 */
|
||
.function-grid {
|
||
text-align: center;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between; /* 关键：自动分配间距 */
|
||
align-items: flex-start;
|
||
margin: 0 auto 20rpx;
|
||
background: white;
|
||
border-radius: 16rpx;
|
||
padding: 30rpx 20rpx;
|
||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
||
width: calc(100% - 40rpx);
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 网格项 - 核心修复 */
|
||
.grid-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 23%; /* 容错宽度，避免换行 */
|
||
margin-bottom: 30rpx;
|
||
box-sizing: border-box;
|
||
padding: 10rpx 0;
|
||
}
|
||
|
||
/* 图标容器 - 统一rpx单位，修复显示问题 */
|
||
.item-icon {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
background-image: url('http://193.112.94.36:8099/static/images/Frame 61.png');
|
||
background-size: 100% 100%; /* 完全填充容器 */
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
.item-iconb {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
background-image: url('http://193.112.94.36:8099/static/images/Frame 67.png');
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
.item-iconc {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
background-image: url('http://193.112.94.36:8099/static/images/Frame 71.png');
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
.item-icond {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
background-image: url('http://193.112.94.36:8099/static/images/Frame 68.png');
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
.item-icone {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
background-image: url('http://193.112.94.36:8099/static/images/Frame 66.png');
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
.item-iconf {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
background-image: url('http://193.112.94.36:8099/static/images/Frame 76.png');
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
.item-icong {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
background-image: url('http://193.112.94.36:8099/static/images/Frame 64.png');
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
.item-iconh {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
background-image: url('http://193.112.94.36:8099/static/images/Frame 63 (1).png');
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
/* 文字样式 - 确保不换行 */
|
||
.item-text {
|
||
font-size: 24rpx;
|
||
color: #333;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
width: 100%;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.function-grids {
|
||
display: inline-flex;
|
||
width: 100%;
|
||
justify-content: space-between;
|
||
margin-bottom: -16rpx;
|
||
background: white;
|
||
border-radius: 16rpx;
|
||
padding: 30rpx;
|
||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
||
box-sizing: border-box;
|
||
}
|
||
.function-gridss {
|
||
width: 100%;
|
||
justify-content: space-between;
|
||
margin-bottom: -16rpx;
|
||
background: white;
|
||
border-radius: 16rpx;
|
||
padding: 20rpx;
|
||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.two{
|
||
display: inline-flex;
|
||
margin-bottom: -8rpx;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 收入预估卡片 */
|
||
.income-card {
|
||
background: white;
|
||
border-radius: 16rpx;
|
||
padding: 30rpx;
|
||
margin-bottom: 30rpx;
|
||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.card-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.card-title {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.card-badge {
|
||
background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
|
||
padding: 12rpx 24rpx;
|
||
border-radius: 25rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.badge-text {
|
||
font-size: 24rpx;
|
||
color: white;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.arrow {
|
||
font-size: 24rpx;
|
||
color: white;
|
||
margin-left: 10rpx;
|
||
}
|
||
|
||
.card-content {
|
||
background: #f8f9fa;
|
||
border-radius: 12rpx;
|
||
padding: 40rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.placeholder-chart {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.chart-icon {
|
||
font-size: 60rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.chart-text {
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
}
|
||
|
||
/* 推广标语 */
|
||
.promotion-banner {
|
||
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
|
||
border-radius: 16rpx;
|
||
padding: 40rpx;
|
||
margin-bottom: 30rpx;
|
||
text-align: center;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.promotion-text {
|
||
font-size: 32rpx;
|
||
color: white;
|
||
font-weight: bold;
|
||
letter-spacing: 2rpx;
|
||
}
|
||
|
||
/* 底部升级提示 */
|
||
.upgrade-footer {
|
||
background: white;
|
||
border-radius: 16rpx;
|
||
padding: 30rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.05);
|
||
position: sticky;
|
||
bottom: 20rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.upgrade-text {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.upgrade-arrow {
|
||
font-size: 28rpx;
|
||
color: #667eea;
|
||
}
|
||
.closeView{
|
||
padding-left: 158rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
.xianjin{
|
||
padding-left: 12rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 响应式适配 - 仅用rpx和百分比 */
|
||
@media (max-width: 600rpx) {
|
||
.grid-item {
|
||
width: 22%; /* 小屏进一步缩小宽度，避免溢出 */
|
||
}
|
||
.item-icon, .item-iconb, .item-iconc, .item-icond,
|
||
.item-icone, .item-iconf, .item-icong, .item-iconh {
|
||
width: 70rpx;
|
||
height: 70rpx;
|
||
}
|
||
.item-text {
|
||
font-size: 20rpx;
|
||
}
|
||
}
|
||
|
||
/* 横屏适配 */
|
||
@media (orientation: landscape) {
|
||
.one {
|
||
height: 150rpx;
|
||
}
|
||
.function-grid {
|
||
padding: 20rpx 10rpx;
|
||
}
|
||
.grid-item {
|
||
width: 15%; /* 横屏时自动调整为6列 */
|
||
}
|
||
.item-text {
|
||
font-size: 18rpx;
|
||
}
|
||
}
|
||
</style> |