shudao-main/shudao-vue-frontend/src/views/mobile/m-Index.vue

<template>
  <div class="mobile-container">
    <!-- 顶部logo -->
    <div class="mobile-header">
      <div class="logo">
        <img src="@/assets/new_index/1.png" alt="logo" class="logo-img">
      </div>
      
      <!-- 用户信息区域 -->
      <div class="mobile-user-info" @mouseenter="showDropdown = true" @mouseleave="showDropdown = false">
        <div class="mobile-user-avatar">
          <div class="mobile-avatar-icon"></div>
        </div>
        <span class="mobile-username">{{ userInfo?.username || '用户' }}</span>
        
        <!-- 下拉菜单 -->
        <div v-if="showDropdown" class="mobile-dropdown-menu">
          <div class="mobile-dropdown-item mobile-logout-item" @click="handleLogout">
            <span>返回APP</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 主内容区域 -->
    <div class="mobile-main-content">
      <!-- 主标题 -->
      <h1 class="mobile-main-title">蜀道安全管理AI智能助手</h1>
      <p class="mobile-sub-title">安全法规问答，智能识图提示，AI赋能筑造安心与高效</p>

      <!-- 搜索框 -->
      <div class="mobile-search-container">
        <div class="mobile-search-box">
          <input 
            type="text" 
            placeholder="请输入您想问的问题..." 
            class="mobile-search-input"
            v-model="searchText"
            @keyup.enter="handleSearch"
          >
          <button class="mobile-voice-btn" @click="handleVoiceClick" :disabled="isSending" :class="{ 'recording': isListening }">
            <div class="mobile-icon-container">
              <img :src="voiceInputIcon" alt="语音" class="mobile-action-icon">
              <div v-if="isListening" class="mobile-recording-indicator"></div>
            </div>
          </button>
          <div class="mobile-divider"></div>
          <button class="mobile-send-btn" @click="handleSearch" :disabled="isSending || !searchText.trim()">
            <img :src="searchText.trim() && !isSending ? sendIconFilled : sendIconEmpty" alt="发送" class="mobile-send-icon">
          </button>
        </div>
      </div>

      <!-- 移动端卡片区域 -->
      <div class="mobile-cards-container">
        <!-- 常见问题卡片 -->
        <div class="mobile-common-questions-card">
          <div class="mobile-card-header">
            <div class="mobile-card-title-section">
              <img src="@/assets/new_index/13.png" alt="场景问题" class="mobile-card-avatar">
              <span class="mobile-card-title">场景问题</span>
            </div>
            <div class="mobile-refresh-button" @click="refreshQuestions">
              <span class="mobile-refresh-text">换一换</span>
            </div>
          </div>
          <div class="mobile-questions-content">
            <div class="mobile-questions-list">
              <div class="mobile-question-item" @click="goToAIQuestion(item.question)" v-for="(item, index) in recommendQuestions" :key="index">
                {{ index + 1 }}. {{ item.question }}
              </div>
            </div>
          </div>
        </div>

        <!-- 服务功能网格 -->
        <div class="mobile-services-grid">
          <div class="mobile-service-item" @click="goToHazardDetection">
            <div class="mobile-service-icon">
              <img src="@/assets/new_index/4.png" alt="隐患提示" class="mobile-service-bg">
            </div>
            <div class="mobile-service-info mobile-service-info-large">
              <div class="mobile-service-title mobile-service-title-large">隐患提示</div>
              <div class="mobile-service-desc mobile-service-desc-large">图片智能识别，风险隐患提示</div>
            </div>
          </div>

          <div class="mobile-service-item" @click="goToSafetyTraining">
            <div class="mobile-service-icon">
              <img src="@/assets/new_index/5.png" alt="安全培训" class="mobile-service-bg">
            </div>
            <div class="mobile-service-info mobile-service-info-large">
              <div class="mobile-service-title mobile-service-title-large">安全培训</div>
              <div class="mobile-service-desc mobile-service-desc-large">智能编排大纲，生成精美演示文稿</div>
            </div>
          </div>
        </div>

        <!-- 四个服务功能单独容器 -->
        <div class="mobile-four-services">
          <div class="mobile-service-item" @click="goToExamWorkshop">
            <div class="mobile-service-header">
              <div class="mobile-service-icon">
                <img src="@/assets/new_index/6-1.png" alt="考试工坊" class="mobile-icon-img">
              </div>
              <div class="mobile-service-title">考试工坊</div>
            </div>
            <div class="mobile-service-description">让组卷更省心,让出题更精准</div>
            <div class="mobile-service-tag" style="color: #2563EB;">生成考题 ›</div>
          </div>

          <div class="mobile-service-item" @click="goToAIWriting">
            <div class="mobile-service-header">
              <div class="mobile-service-icon">
                <img src="@/assets/new_index/7-1.png" alt="AI写作" class="mobile-icon-img">
              </div>
              <div class="mobile-service-title">AI写作</div>
            </div>
            <div class="mobile-service-description">一键创作公文,让文案更专业</div>
            <div class="mobile-service-tag" style="color: #16A34A;">开始创作 ›</div>
          </div>

          <div class="mobile-service-item" @click="goToPolicyDocument">
            <div class="mobile-service-header">
              <div class="mobile-service-icon">
                <img src="@/assets/new_index/8-1.png" alt="政策文件" class="mobile-icon-img">
              </div>
              <div class="mobile-service-title">政策文件</div>
            </div>
            <div class="mobile-service-description">汇集国家、行业及集团政策文件</div>
            <div class="mobile-service-tag" style="color: #EA580C;">了解更多 ›</div>
          </div>

          <div class="mobile-service-item" @click="openFeedbackModal">
            <div class="mobile-service-header">
              <div class="mobile-service-icon">
                <img src="@/assets/new_index/9-1.png" alt="意见反馈" class="mobile-icon-img">
              </div>
              <div class="mobile-service-title">意见反馈</div>
            </div>
            <div class="mobile-service-description">助力产品升级,期待您的反馈</div>
            <div class="mobile-service-tag" style="color: #9333EA;">参与反馈 ›</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部版权信息 -->
    <div class="mobile-footer">
      <div class="mobile-footer-info">
        <span>工信部备案号: 蜀ICP备20251411234号-1</span>
        <span>川公网安备: 51010502011234号</span>
      </div>
    </div>

    <!-- 意见反馈弹窗 -->
    <FeedbackModal 
      :visible="showFeedbackModal" 
      @close="closeFeedbackModal"
      @submit="handleFeedbackSubmit"
    />
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import FeedbackModal from '@/components/MobileFeedbackModal.vue'
import { apis } from '@/request/apis.js'
// ===== 已删除：getUserId - 不再需要，改用token =====
// import { getUserId } from '@/utils/userManager.js'
import { useSpeechRecognition } from '@/composables/useSpeechRecognition.js'
import { performLogout, getUsername } from '@/utils/auth.js'

// 导入Element Plus组件
import { ElMessage } from 'element-plus'

// 导入图标
import voiceInputIcon from '@/assets/Chat/18.png'
import sendIconEmpty from '@/assets/Chat/15.png'
import sendIconFilled from '@/assets/Chat/16.png'

const router = useRouter()

// 语音识别功能
const {
  isSupported: speechSupported,
  isListening,
  isProcessing,
  transcript,
  error: speechError,
  startListening,
  stopListening
} = useSpeechRecognition()

// 响应式数据
const searchText = ref('')
const showFeedbackModal = ref(false)
const isSending = ref(false)
const recommendQuestions = ref([])

// 用户信息相关
const userInfo = ref(null)
const showDropdown = ref(false)

// 获取推荐问题
const getRecommendQuestion = async () => {
  try {
    const res = await apis.getRecommendQuestion({ limit: 5 })
    recommendQuestions.value = res.data
    console.log('推荐问题数据结构:', recommendQuestions.value)
  } catch (error) {
    console.error('获取推荐问题失败:', error)
  }
}

// 换一换
const refreshQuestions = () => {
  getRecommendQuestion()
}

// 语音输入相关方法
const handleVoiceClick = () => {
  console.log('点击语音按钮')
  if (isProcessing.value) {
    ElMessage.info('语音正在转写，请稍候...')
    return
  }
  if (isListening.value) {
    stopVoiceInput()
  } else {
    startVoiceInput()
  }
}

const startVoiceInput = () => {
  console.log('开始语音输入')
  
  // 开始语音识别
  const success = startListening()
  if (!success) {
    ElMessage.error('语音识别启动失败，请检查麦克风权限')
  }
}

const stopVoiceInput = () => {
  console.log('停止语音输入')
  stopListening()
  ElMessage.info('语音转写中，请稍候...')
}

// 搜索功能
const handleSearch = async () => {
  if (!searchText.value.trim()) {
    ElMessage.warning('请输入搜索内容')
    return
  }
  
  if (isSending.value) return
  
  isSending.value = true
  try {
    console.log('搜索内容:', searchText.value)
    // 跳转到AI问答页面，并传递搜索内容
    router.push({
      path: '/mobile/chat',
      query: {
        autoMessage: searchText.value
      }
    })
  } finally {
    isSending.value = false
  }
}

// 意见反馈弹窗相关方法
const openFeedbackModal = () => {
  showFeedbackModal.value = true
}

const closeFeedbackModal = () => {
  showFeedbackModal.value = false
}

// 提交意见反馈
const handleFeedbackSubmit = async (feedbackData) => {
  try {
    console.log('收到反馈数据:', feedbackData)
    console.log('feedback_img字段值:', feedbackData.feedback_img)
    
    // 处理图片数据 - 直接使用feedback_img字段
    let feedbackImg = feedbackData.feedback_img || ''
    console.log('处理后的feedbackImg:', feedbackImg)
    
    // 将前端数据格式转换为后端字段格式
    const feedbackPayload = {
      feedback_type: getFeedbackType(feedbackData.type),
      feedback_content: feedbackData.content,
      feedback_user_phone: feedbackData.contact || '',
      feedback_img: feedbackImg
      // ===== 已删除：user_id - 后端从token解析 =====
    }
    console.log(feedbackPayload,'feedbackPayload')
    
    // 调用API接口
    const response = await apis.submitFeedback(feedbackPayload)
    console.log(response,'response')
    
    // 提交成功
    ElMessage.success('反馈提交成功！感谢您的宝贵意见')
    closeFeedbackModal()
    
  } catch (error) {
    console.error('提交反馈失败:', error)
    ElMessage.error('提交反馈失败，请重试')
  }
}

// 将前端反馈类型转换为后端数字类型
const getFeedbackType = (type) => {
  const typeMap = {
    'function': 1,    // 功能建议 -> 问题反馈
    'interface': 2,   // 界面优化 -> 界面优化
    'experience': 3,  // 体验问题 -> 体验问题
    'other': 4        // 其他 -> 其他
  }
  return typeMap[type] || 1
}

// 推荐问题点击跳转
const goToAIQuestion = (question) => {
  console.log('点击问题:', question)
  // 跳转到AI问答页面，并传递问题内容
  router.push({
    path: '/mobile/chat',
    query: {
      autoMessage: question
    }
  })
}

// 服务导航跳转方法
const goToHazardDetection = () => {
  router.push('/mobile/hazard-detection')
}

const goToSafetyTraining = () => {
  router.push('/mobile/safety-hazard')
}

const goToExamWorkshop = () => {
  router.push('/mobile/exam-workshop')
}

const goToAIWriting = () => {
  router.push('/mobile/ai-writing')
}

const goToPolicyDocument = () => {
  router.push('/mobile/policy-document')
}

// 返回APP（登出逻辑）
const handleLogout = () => {
  console.log('='.repeat(60))
  console.log('📱 用户点击"返回APP"按钮 - 执行登出逻辑')
  console.log('🌐 当前 URL:', window.location.href)
  console.log('🔍 检查 window.nativeClosePage:', typeof window.nativeClosePage)

  try {
    // 步骤1: 清除本地存储的用户信息和 token
    console.log('🧹 开始清除本地存储数据...')
    localStorage.removeItem('token')
    localStorage.removeItem('userInfo')
    localStorage.removeItem('username')
    sessionStorage.clear()
    console.log('✅ 本地存储数据已清除')

    // 步骤2: 调用原生方法关闭页面
    // 根据《移动客户端与H5对接规范》，优先使用 nativeClosePage() 方法
    if (window.nativeClosePage && typeof window.nativeClosePage === 'function') {
      console.log('✅ 检测到 nativeClosePage 方法，准备调用原生接口...')
      window.nativeClosePage()
      console.log('✅ 已成功调用 nativeClosePage()')
      return
    }

    // 降级方案1: 尝试使用 finishPage() 方法（部分 APP 可能使用此命名）
    if (window.finishPage && typeof window.finishPage === 'function') {
      console.log('✅ 检测到 finishPage 方法，准备调用原生接口...')
      window.finishPage()
      console.log('✅ 已成功调用 finishPage()')
      return
    }

    // 降级方案2: 使用 window.close() 关闭 WebView
    console.log('⚠️ 未检测到原生方法，尝试使用 window.close()')
    window.close()
    console.log('✅ 已调用 window.close()')

    // 如果 window.close() 没有立即关闭（比如在普通浏览器中），显示提示
    setTimeout(() => {
      console.warn('⚠️ window.close() 可能未生效，显示提示信息')
      ElMessage.info('如果页面未关闭，请使用 APP 的返回按钮')
    }, 500)

  } catch (error) {
    console.error('❌ 登出过程发生错误:', error)
    console.error('❌ 错误详情:', error.message)
    console.warn('⚠️ 当前环境:', navigator.userAgent)
    ElMessage.warning('无法自动关闭页面，请使用 APP 的返回按钮')
  }

  console.log('='.repeat(60))
}

// 监听语音识别错误
watch(transcript, (newVal) => {
  if (!newVal || isListening.value) return
  searchText.value = newVal
})

watch(speechError, (newVal) => {
  if (newVal) {
    console.error('语音识别错误:', newVal)
    ElMessage.error(newVal)
  }
})

onMounted(() => {
  getRecommendQuestion()
  // 从本地存储获取用户名
  const username = getUsername()
  userInfo.value = {
    username: username || '蜀道用户'
  }
  console.log('用户信息:', userInfo.value)
})
</script>

<style lang="less" scoped>
.mobile-container {
  width: 100%;
  min-height: 100vh;
  background-image: url('@/assets/new_index/2.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  display: flex;
  flex-direction: column;
  padding-bottom: 80px;
  box-sizing: border-box;
  position: relative;
}

/* 移动端顶部logo区域 */
.mobile-header {
  padding: 20px 20px 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .logo {
    display: flex;
    align-items: center;
    
    .logo-img {
      width: 120px;
      height: 35px;
    }
  }
  
  /* 移动端用户信息区域 */
  .mobile-user-info {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    transition: background-color 0.3s ease;
    height: 40px;
    
    .mobile-user-avatar {
      display: flex;
      align-items: center;
      justify-content: center;
      
      .mobile-avatar-icon {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: #DBEAFE;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        
        &::before {
          content: '👤';
          font-size: 14px;
          color: #2563EB;
        }
      }
    }
    
    .mobile-username {
      font-size: 14px;
      color: #000B63;
      font-weight: 500;
      white-space: nowrap;
      line-height: 1;
      display: flex;
      align-items: center;
    }
    
    /* 移动端下拉菜单 */
    .mobile-dropdown-menu {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: white;
      border-radius: 6px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      border: 1px solid #E5E7EB;
      z-index: 1000;
      overflow: hidden;
      
      .mobile-dropdown-item {
        padding: 10px 12px;
        font-size: 13px;
        color: #374151;
        cursor: pointer;
        transition: background-color 0.2s ease;
        
        &:hover {
          background-color: #F3F4F6;
        }
        
        &.mobile-logout-item {
          color: #DC2626;
          
          &:hover {
            background-color: #FEF2F2;
          }
        }
      }
    }
  }
}

/* 移动端主内容区域 */
.mobile-main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 16px 0 16px;
  width: 100%;
  box-sizing: border-box;
}

/* 移动端主标题 */
.mobile-main-title {
  font-size: 32px;
  font-weight: 900;
  color: #000B63;
  text-align: center;
  margin: 0;
  line-height: 1.2;
}

.mobile-sub-title {
  font-size: 16px;
  color: #000B63;
  text-align: center;
  margin: 12px 0 0 0;
  line-height: 1.4;
  padding: 0 20px;
}

/* 移动端搜索框 */
.mobile-search-container {
  width: 100%;
  margin: 24px 0 0 0;
  
  .mobile-search-box {
    position: relative;
    width: 100%;
    height: 48px;
    border: 2px solid #000B63;
    border-radius: 11.5px;
    background: #ffffff;
    display: flex;
    align-items: center;
    padding: 0 16px;
    
    .mobile-search-input {
      flex: 1;
      height: 100%;
      border: none;
      outline: none;
      font-size: 16px;
      background: transparent;
      padding: 0 12px 0 0;
      
      &::placeholder {
        color: #9CA3AF;
      }
    }
    
    .mobile-voice-btn {
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
      margin-right: 0;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      
      &:hover {
        opacity: 0.8;
      }
      
      .mobile-icon-container {
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        position: relative;
      }
      
      .mobile-recording-indicator {
        position: absolute;
        top: -2px;
        right: -2px;
        width: 8px;
        height: 8px;
        background: #ef4444;
        border-radius: 50%;
        animation: blink 1s ease-in-out infinite;
      }
      
      .mobile-action-icon {
        width: 20px;
        height: 20px;
        max-width: 20px;
        max-height: 20px;
        object-fit: contain;
      }
    }
    
    .mobile-divider {
      width: 1px;
      height: 24px;
      background-color: #D6D5DE;
      margin: 0 8px;
    }
    
    .mobile-send-btn {
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      
      &:hover:not(:disabled) {
        opacity: 0.8;
      }
      
      &:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }
      
      .mobile-send-icon {
        width: 60px;
        height: 28px;
        object-fit: contain;
      }
    }
  }
}

@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* 移动端卡片区域 */
.mobile-cards-container {
  width: 100%;
  margin: 24px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 移动端常见问题卡片 */
.mobile-common-questions-card {
  background: linear-gradient(146.85deg, rgba(70, 114, 255, 1) 0%, rgba(125, 170, 252, 1) 100%);
  width: 100%;
  height: 400px;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
  
  .mobile-card-header {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 2;
    
    .mobile-card-title-section {
      display: flex;
      align-items: center;
      gap: 12px;
      
      .mobile-card-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
        // border: 2px solid rgba(255, 255, 255, 0.3);
      }
      
      .mobile-card-title {
        font-size: 22px;
        font-weight: 900;
        color: #FFFFFF;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      }
    }
    
    .mobile-refresh-button {
      background: rgba(255, 255, 255, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 20px;
      // height: 36px;
      // width: 70px;
      padding: 8px 15px;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(10px);
      
      &:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: translateY(-1px);
      }
      
      .mobile-refresh-text {
        font-size: 14px;
        color: #FFFFFF;
        font-weight: 500;
        line-height: 1;
      }
    }
  }
  
  .mobile-questions-content {
    position: absolute;
    top: 70px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    padding: 20px;
    overflow-y: auto;
    backdrop-filter: blur(10px);
    
    .mobile-questions-list {
      .mobile-question-item {
        margin-bottom: 16px;
        font-size: 16px;
        color: #1F2937;
        cursor: pointer;
        transition: all 0.3s ease;
        line-height: 1.5;
        padding: 8px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        
        &:hover {
          color: #4672FF;
          transform: translateX(4px);
          background: rgba(70, 114, 255, 0.05);
          border-radius: 8px;
          padding: 8px 12px;
          margin: 8px -12px;
          white-space: normal;
          overflow: visible;
          text-overflow: unset;
        }
        
        &:last-child {
          margin-bottom: 0;
          border-bottom: none;
        }
      }
    }
  }
}

/* 移动端服务功能网格 */
.mobile-services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  // margin-bottom: 16px;
  
  .mobile-service-item {
    height: 200px;
  }
  
  // 前两个服务功能的独立样式
  .mobile-service-info-large {
    position: absolute;
    left: 35px;
    bottom: 20px;
    
    .mobile-service-title-large {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 4px;
      line-height: 1.2;
    }
    
    .mobile-service-desc-large {
      font-size: 14px;
      line-height: 1.4;
    }
  }
  
  // 隐患提示卡片（第1个）- 黑色文字
  .mobile-service-item:nth-child(1) {
    .mobile-service-info-large {
      .mobile-service-title-large {
        font-size: 24px;
        font-weight: 600;
        color: #000000;
      }
      
      .mobile-service-desc-large {
        font-size: 16px;
        font-weight: 400;
        color: #4B5563;
      }
    }
  }
  
  // 安全培训卡片（第2个）- 白色文字
  .mobile-service-item:nth-child(2) {
    .mobile-service-info-large {
      bottom: 28px;
      .mobile-service-title-large {
        color: #FFFFFF;
        font-size: 24px;
        font-weight: 600;
      }
      
      .mobile-service-desc-large {
        color: #DBEAFE;
        font-size: 16px;
        font-weight: 400;
      }
    }
  }
}

/* 四个服务功能单独容器 */
.mobile-four-services {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  
  .mobile-service-item {
    flex: 1;
    min-width: calc(50% - 6px);
    max-width: calc(50% - 6px);
    
    // 考试工坊
    &:nth-child(1) {
      background-image: url('@/assets/new_index/6.png');
    }
    
    // AI写作
    &:nth-child(2) {
      background-image: url('@/assets/new_index/7.png');
    }
    
    // 政策文件
    &:nth-child(3) {
      background-image: url('@/assets/new_index/8.png');
    }
    
    // 意见反馈
    &:nth-child(4) {
      background-image: url('@/assets/new_index/9.png');
    }
    
    .mobile-service-header {
      position: absolute;
      left: 50%;
      top: 1px;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    
    .mobile-service-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      
      .mobile-icon-img {
        width: 30px;
        height: 30px;
        object-fit: contain;
      }
    }
    
    .mobile-service-title {
      font-size: 18px;
      color: #000000;
      font-weight: 600;
      line-height: 1;
      white-space: nowrap;
      flex-shrink: 0;
    }
    
    .mobile-service-description {
      position: absolute;
      left: 50%;
      top: 50px;
      transform: translateX(-50%);
      font-size: 12px;
      color: #4B5563;
      line-height: 1.4;
      text-align: center;
      width: 100%;
    }
    
    .mobile-service-tag {
      position: absolute;
      left: 20px;
      // bottom: 20px;
      font-size: 12px;
      font-weight: 500;
      white-space: nowrap;
    }
  }
}

.mobile-service-item {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  }
  
  // 隐患提示
  &:nth-child(1) {
    background-image: url('@/assets/new_index/4.png');
  }
  
  // 安全培训
  &:nth-child(2) {
    background-image: url('@/assets/new_index/5.png');
  }
  
  
  .mobile-service-icon {
    display: none; // 隐藏图标，使用背景图
  }
  
  .mobile-service-info {
    .mobile-service-title {
      font-size: 16px;
      color: #000000;
      font-weight: 600;
      margin-bottom: 4px;
      line-height: 1.2;
    }
    
    .mobile-service-desc {
      font-size: 12px;
      color: #4B5563;
      line-height: 1.3;
    }
  }
}

/* 移动端底部版权信息 */
.mobile-footer {
  width: 100%;
  height: 40px;
  background-image: url('@/assets/new_index/10.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  // margin-top: auto;
  position: absolute;
  bottom: 0;
  
  .mobile-footer-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 38px;
    font-size: 10px;
    color: #6B7280;
    line-height: 1.2;
    text-align: center;
    padding: 0 16px;
  }
}

/* 移动端响应式调整 */
@media (max-width: 480px) {
  .mobile-main-title {
    font-size: 28px;
  }
  
  .mobile-sub-title {
    font-size: 14px;
  }
  
  .mobile-services-grid {
    grid-template-columns: 1fr;
  }
  
  .mobile-service-item {
    .mobile-service-icon {
      height: 60px;
    }
    
    .mobile-service-info {
      .mobile-service-title {
        font-size: 14px;
      }
      
      .mobile-service-desc {
        font-size: 11px;
      }
    }
  }
}
</style>