1394 lines
26 KiB
Vue
1394 lines
26 KiB
Vue
<template>
|
||
<view class="container">
|
||
|
||
<view class="one">
|
||
<view class="barsOne" ><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"><uni-icons type="gear" size="30" class="gearIcons"></uni-icons></view>
|
||
</view>
|
||
<!-- 顶部状态栏 -->
|
||
<view class="page-wrapper">
|
||
<view class="function-gridss">
|
||
<view class="two">
|
||
<view class="shop-icons">
|
||
<image
|
||
src="/static/Frame 8.png"
|
||
class="shop-icon"
|
||
mode="aspectFit"
|
||
/>
|
||
</view>
|
||
|
||
|
||
<!-- 中间：店铺信息和状态 -->
|
||
<view class="status-center">
|
||
<view class="store-name" @click="goToUser">{{ storeName }}</view>
|
||
<view class="status-info">
|
||
<text class="status-text">值守中</text>
|
||
<view class="status-dot"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="xianjin">
|
||
<image
|
||
src="/static/Frame 75.png"
|
||
mode="aspectFit"
|
||
class="close-icon"
|
||
@click="closeDuty"
|
||
/>
|
||
</view>
|
||
|
||
<view class="closeView">
|
||
<!-- 右侧：关闭按钮图片 -->
|
||
<image
|
||
src="/static/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">202</text>
|
||
<text class="stat-label">今日进店</text>
|
||
</view>
|
||
<view class="stat-item">
|
||
<text class="stat-value">121</text>
|
||
<text class="stat-label">支付订单</text>
|
||
</view>
|
||
<view class="stat-item">
|
||
<text class="stat-value">433.23</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">
|
||
|
||
</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('数据分析')">
|
||
<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 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: '我的便利店' // 门店名称
|
||
}
|
||
},
|
||
onShow() {
|
||
// 获取门店信息
|
||
const storeInfo = getStoreInfo();
|
||
if (storeInfo && storeInfo.storeName) {
|
||
this.storeName = storeInfo.storeName;
|
||
}
|
||
},
|
||
methods: {
|
||
navigateTo(page) {
|
||
uni.showToast({
|
||
title: `跳转到${page}`,
|
||
icon: 'none'
|
||
})
|
||
// 实际开发中可以跳转到对应页面
|
||
// uni.navigateTo({
|
||
// url: `/pages/${page}/index`
|
||
// })
|
||
},
|
||
goToUser() {
|
||
uni.navigateTo({
|
||
url: '/pages/user/user'
|
||
})
|
||
},
|
||
goToProduct() {
|
||
uni.navigateTo({
|
||
url: '/pages/product/product'
|
||
})
|
||
},
|
||
goToAsset() {
|
||
uni.navigateTo({
|
||
url: '/pages/asset/asset'
|
||
})
|
||
},
|
||
// 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";
|
||
|
||
.one{
|
||
width: 100%;
|
||
height: 100rpx;
|
||
/* 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;
|
||
position: relative;
|
||
}
|
||
.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);
|
||
}
|
||
|
||
.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; /* 最底层 */
|
||
}
|
||
.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; */
|
||
}
|
||
|
||
/* 顶部状态栏 - 图片版本 */
|
||
.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;
|
||
/* margin-right: 0rpx; */
|
||
/* padding: 2rpx; */
|
||
|
||
|
||
}
|
||
.close-icons {
|
||
width: 172rpx;
|
||
height: 98rpx;
|
||
/* margin-right: 0rpx; */
|
||
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: 10000rpx;
|
||
}
|
||
|
||
/* 功能网格样式 */
|
||
.function-grid {
|
||
text-align: center;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: flex-start;
|
||
margin-bottom: 20rpx;
|
||
background: white;
|
||
border-radius: 16rpx;
|
||
padding: 40rpx 20rpx;
|
||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
/* H5平台 - 使用px单位 */
|
||
/* #ifdef H5 */
|
||
.function-grid {
|
||
padding: 40px 20px;
|
||
}
|
||
|
||
.function-grid .grid-item {
|
||
width: calc(25% - 20px);
|
||
margin-right: 20px;
|
||
margin-bottom: 20px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.function-grid .grid-item:nth-child(4n) {
|
||
margin-right: 0;
|
||
}
|
||
/* #endif */
|
||
|
||
/* App平台 - 使用rpx单位 */
|
||
/* #ifdef APP-PLUS */
|
||
.function-grid {
|
||
padding: 40rpx 20rpx;
|
||
}
|
||
|
||
.function-grid .grid-item {
|
||
width: calc(25% - 20rpx);
|
||
margin-right: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.function-grid .grid-item:nth-child(4n) {
|
||
margin-right: 0;
|
||
}
|
||
/* #endif */
|
||
|
||
.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);
|
||
}
|
||
.function-gridss {
|
||
/* display: inline-flex; */
|
||
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);
|
||
}
|
||
|
||
.two{
|
||
display: inline-flex;
|
||
/* flex: 1; */
|
||
margin-bottom: -8rpx;
|
||
}
|
||
.grid-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
width: 150rpx;
|
||
}
|
||
|
||
.item-icon {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
/* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
|
||
background-image: url('/static/Frame 61.png');
|
||
background-size: 106rpx 106rpx; /* 宽度 高度 */
|
||
|
||
background-repeat: no-repeat; /* 关键：禁止重复 */
|
||
background-position: center; /* 可选：居中显示 */
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: -15rpx;
|
||
}
|
||
.item-iconb {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
/* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
|
||
background-image: url('/static/Frame 67.png');
|
||
background-size: 106rpx 106rpx; /* 宽度 高度 */
|
||
|
||
background-repeat: no-repeat; /* 关键：禁止重复 */
|
||
background-position: center; /* 可选：居中显示 */
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: -15rpx;
|
||
}
|
||
.item-iconc {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
/* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
|
||
background-image: url('/static/Frame 71.png');
|
||
background-size: 106rpx 106rpx; /* 宽度 高度 */
|
||
|
||
background-repeat: no-repeat; /* 关键：禁止重复 */
|
||
background-position: center; /* 可选：居中显示 */
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: -15rpx;
|
||
}
|
||
.item-icond {
|
||
/* width: 100rpx; */
|
||
/* height: 100rpx; */
|
||
/* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
|
||
background-image: url('/static/Frame 68.png');
|
||
background-size: 106rpx 106rpx; /* 宽度 高度 */
|
||
|
||
background-repeat: no-repeat; /* 关键：禁止重复 */
|
||
background-position: center; /* 可选：居中显示 */
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: -15rpx;
|
||
}
|
||
.item-icone {
|
||
/* width: 100rpx; */
|
||
/* height: 100rpx; */
|
||
/* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
|
||
background-image: url('/static/Frame 66.png');
|
||
background-size: 106rpx 106rpx; /* 宽度 高度 */
|
||
|
||
background-repeat: no-repeat; /* 关键：禁止重复 */
|
||
background-position: center; /* 可选：居中显示 */
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: -15rpx;
|
||
}
|
||
.item-iconf {
|
||
/* width: 100rpx; */
|
||
/* height: 100rpx; */
|
||
/* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
|
||
background-image: url('/static/Frame 76.png');
|
||
background-size: 106rpx 106rpx; /* 宽度 高度 */
|
||
|
||
background-repeat: no-repeat; /* 关键：禁止重复 */
|
||
background-position: center; /* 可选：居中显示 */
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: -15rpx;
|
||
}
|
||
.item-icong {
|
||
/* width: 100rpx; */
|
||
/* height: 100rpx; */
|
||
/* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
|
||
background-image: url('/static/Frame 64.png');
|
||
background-size: 106rpx 106rpx; /* 宽度 高度 */
|
||
|
||
background-repeat: no-repeat; /* 关键：禁止重复 */
|
||
background-position: center; /* 可选：居中显示 */
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: -15rpx;
|
||
}.item-iconh {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
/* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
|
||
background-image: url('/static/Frame 64.png');
|
||
background-size: 106rpx 106rpx; /* 宽度 高度 */
|
||
|
||
background-repeat: no-repeat; /* 关键：禁止重复 */
|
||
background-position: center; /* 可选：居中显示 */
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: -15rpx;
|
||
}
|
||
|
||
/* .icon {
|
||
font-size: 50rpx;
|
||
} */
|
||
|
||
.item-text {
|
||
font-size: 24rpx;
|
||
color: #333;
|
||
text-align: center;
|
||
line-height: 4.2;
|
||
}
|
||
|
||
/* 收入预估卡片 */
|
||
.income-card {
|
||
background: white;
|
||
border-radius: 16rpx;
|
||
padding: 30rpx;
|
||
margin-bottom: 30rpx;
|
||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.upgrade-text {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.upgrade-arrow {
|
||
font-size: 28rpx;
|
||
color: #667eea;
|
||
}
|
||
.closeView{
|
||
padding-left: 158rpx
|
||
}
|
||
.xianjin{
|
||
padding-left: 12rpx
|
||
}
|
||
/* 响应式调整 - 使用margin替代gap提高兼容性 */
|
||
|
||
/* H5平台 - 使用px单位 */
|
||
/* #ifdef H5 */
|
||
@media (min-width: 751px) {
|
||
.function-grid .grid-item {
|
||
width: calc(25% - 20px);
|
||
margin-right: 20px;
|
||
}
|
||
|
||
.function-grid .grid-item:nth-child(4n) {
|
||
margin-right: 0;
|
||
}
|
||
|
||
.item-icon,
|
||
.item-iconb,
|
||
.item-iconc,
|
||
.item-icond,
|
||
.item-icone,
|
||
.item-iconf,
|
||
.item-icong,
|
||
.item-iconh {
|
||
width: 80px;
|
||
height: 80px;
|
||
background-size: 80px 80px;
|
||
}
|
||
|
||
.item-text {
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 750px) and (min-width: 601px) {
|
||
.function-grid .grid-item {
|
||
width: calc(25% - 15px);
|
||
margin-right: 15px;
|
||
}
|
||
|
||
.function-grid .grid-item:nth-child(4n) {
|
||
margin-right: 0;
|
||
}
|
||
|
||
.item-icon,
|
||
.item-iconb,
|
||
.item-iconc,
|
||
.item-icond,
|
||
.item-icone,
|
||
.item-iconf,
|
||
.item-icong,
|
||
.item-iconh {
|
||
width: 70px;
|
||
height: 70px;
|
||
background-size: 70px 70px;
|
||
}
|
||
|
||
.item-text {
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 600px) and (min-width: 401px) {
|
||
.function-grid .grid-item {
|
||
width: calc(25% - 12px);
|
||
margin-right: 12px;
|
||
}
|
||
|
||
.function-grid .grid-item:nth-child(4n) {
|
||
margin-right: 0;
|
||
}
|
||
|
||
.item-icon,
|
||
.item-iconb,
|
||
.item-iconc,
|
||
.item-icond,
|
||
.item-icone,
|
||
.item-iconf,
|
||
.item-icong,
|
||
.item-iconh {
|
||
width: 60px;
|
||
height: 60px;
|
||
background-size: 60px 60px;
|
||
}
|
||
|
||
.item-text {
|
||
font-size: 11px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 400px) {
|
||
.function-grid .grid-item {
|
||
width: calc(25% - 10px);
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.function-grid .grid-item:nth-child(4n) {
|
||
margin-right: 0;
|
||
}
|
||
|
||
.item-icon,
|
||
.item-iconb,
|
||
.item-iconc,
|
||
.item-icond,
|
||
.item-icone,
|
||
.item-iconf,
|
||
.item-icong,
|
||
.item-iconh {
|
||
width: 50px;
|
||
height: 50px;
|
||
background-size: 50px 50px;
|
||
}
|
||
|
||
.item-text {
|
||
font-size: 10px;
|
||
}
|
||
|
||
.stats {
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.stat-item {
|
||
width: 50%;
|
||
}
|
||
}
|
||
/* #endif */
|
||
|
||
/* App平台 - 使用rpx单位 */
|
||
/* #ifdef APP-PLUS */
|
||
@media (min-width: 751rpx) {
|
||
.function-grid .grid-item {
|
||
width: calc(25% - 20rpx);
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.function-grid .grid-item:nth-child(4n) {
|
||
margin-right: 0;
|
||
}
|
||
|
||
.item-icon,
|
||
.item-iconb,
|
||
.item-iconc,
|
||
.item-icond,
|
||
.item-icone,
|
||
.item-iconf,
|
||
.item-icong,
|
||
.item-iconh {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
background-size: 100rpx 100rpx;
|
||
}
|
||
|
||
.item-text {
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 750rpx) and (min-width: 601rpx) {
|
||
.function-grid .grid-item {
|
||
width: calc(25% - 15rpx);
|
||
margin-right: 15rpx;
|
||
}
|
||
|
||
.function-grid .grid-item:nth-child(4n) {
|
||
margin-right: 0;
|
||
}
|
||
|
||
.item-icon,
|
||
.item-iconb,
|
||
.item-iconc,
|
||
.item-icond,
|
||
.item-icone,
|
||
.item-iconf,
|
||
.item-icong,
|
||
.item-iconh {
|
||
width: 86rpx;
|
||
height: 86rpx;
|
||
background-size: 86rpx 86rpx;
|
||
}
|
||
|
||
.item-text {
|
||
font-size: 22rpx;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 600rpx) and (min-width: 401rpx) {
|
||
.function-grid .grid-item {
|
||
width: calc(25% - 12rpx);
|
||
margin-right: 12rpx;
|
||
}
|
||
|
||
.function-grid .grid-item:nth-child(4n) {
|
||
margin-right: 0;
|
||
}
|
||
|
||
.item-icon,
|
||
.item-iconb,
|
||
.item-iconc,
|
||
.item-icond,
|
||
.item-icone,
|
||
.item-iconf,
|
||
.item-icong,
|
||
.item-iconh {
|
||
width: 70rpx;
|
||
height: 70rpx;
|
||
background-size: 70rpx 70rpx;
|
||
}
|
||
|
||
.item-text {
|
||
font-size: 20rpx;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 400rpx) {
|
||
.function-grid .grid-item {
|
||
width: calc(25% - 10rpx);
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.function-grid .grid-item:nth-child(4n) {
|
||
margin-right: 0;
|
||
}
|
||
|
||
.item-icon,
|
||
.item-iconb,
|
||
.item-iconc,
|
||
.item-icond,
|
||
.item-icone,
|
||
.item-iconf,
|
||
.item-icong,
|
||
.item-iconh {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
background-size: 60rpx 60rpx;
|
||
}
|
||
|
||
.item-text {
|
||
font-size: 18rpx;
|
||
}
|
||
|
||
.stats {
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.stat-item {
|
||
width: 50%;
|
||
}
|
||
}
|
||
/* #endif */
|
||
|
||
/* 横屏适配 */
|
||
@media screen and (orientation: landscape) {
|
||
.one {
|
||
height: 150px;
|
||
}
|
||
|
||
.function-grid {
|
||
padding: 15rpx 15rpx;
|
||
}
|
||
}
|
||
</style> |