ry_app/pages/index.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" @click="codeData"><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: {
	//扫码
	codeData(){
		uni.showToast({
		  title: `扫码`,
		  icon: 'none'
		})
	},
    // 新增：切换选中店铺的方法
    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: '/package_a/user/user'
      })
    },
	goSetting(){
		uni.navigateTo({
		  url: '/package_a/settings/settings'
		})	
	},
	goToProduct() {
	  uni.navigateTo({
	    url: '/package_a/product/product'
	  })
	},
	goToAsset() {
	  uni.navigateTo({
	    url: '/package_a/asset/asset'
	  })
	},
	goToBack(){
		uni.navigateTo({
			url:'/package_a/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>