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

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

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

      <!-- 搜索框 -->
      <div class="search-container">
        <div class="search-box">
          <input 
            type="text" 
            placeholder="请输入您想问的问题..." 
            class="search-input"
            v-model="searchText"
            @keyup.enter="handleSearch"
            @input="handleInput"
          >
          <button class="voice-btn" @click="handleVoiceClick" :disabled="isSending" :class="{ 'recording': isListening }">
            <div class="icon-container">
              <img :src="voiceInputIcon" alt="语音" class="action-icon">
              <div v-if="isListening" class="recording-indicator"></div>
            </div>
          </button>
          <div class="divider"></div>
          <button class="send-btn" @click="handleSearch" :disabled="isSending || !searchText.trim()">
            <img :src="searchText.trim() && !isSending ? sendIconFilled : sendIconEmpty" alt="发送" class="send-icon">
          </button>
        </div>
        
        <!-- 提问联想 -->
        <div v-if="showSuggestions && userRecommendQuestions.length > 0" class="user-recommend-questions" @click.stop>
          <div class="recommend-list">
            <div 
              v-for="(question, index) in userRecommendQuestions" 
              :key="index"
              class="recommend-item" 
              @click="handleUserRecommendQuestion(question)"
            >
              {{ question }}
            </div>
          </div>
        </div>
      </div>

      <!-- 卡片区域 -->
      <div class="cards-container">
        <!-- 第一列：常见问题 -->
        <div class="card-column first-column">
          <div class="common-questions-card">
            <div class="card-header">
              <div class="refresh-button" @click="refreshQuestions">
                <span class="refresh-text">换一换</span>
              </div>
            </div>
            <div class="questions-content">
              <div class="questions-list">
                <div class="question-item" @click="goToAIQuestion(item.question)" v-for="(item, index) in recommendQuestions" :key="index" :title="item.question">
                  {{ index + 1 }}. {{ item.question }}
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 第二列：隐患提示和安全培训 -->
        <div class="card-column">
          <div class="hazard-card" @click="goToHazardDetection">
            <div class="card-title">隐患提示</div>
            <div class="card-description">图片智能识别，风险隐患提示</div>
          </div>
          <div class="training-card" @click="goToSafetyTraining">
            <div class="card-title">安全培训</div>
            <div class="card-description">智能编排大纲，生成精美演示文稿</div>
          </div>
        </div>

        <!-- 第三列：考试工坊和政策文件 -->
        <div class="card-column">
          <div class="service-card exam-workshop-card" @click="goToExamWorkshop">
            <div class="service-header">
              <div class="service-icon">
                <img src="@/assets/new_index/6-1.png" alt="考试工坊" class="icon-img">
              </div>
              <div class="service-title">考试工坊</div>
            </div>
            <div class="service-description">让组卷更省心,让出题更精准</div>
            <div class="service-tag" style="color: #2563EB;">生成考题 ›</div>
          </div>
          <div class="service-card policy-document-card" @click="goToPolicyDocument">
            <div class="service-header">
              <div class="service-icon">
                <img src="@/assets/new_index/8-1.png" alt="政策文件" class="icon-img">
              </div>
              <div class="service-title">政策文件</div>
            </div>
            <div class="service-description">汇集国家、行业及集团政策文件</div>
            <div class="service-tag" style="color: #EA580C;">了解更多 ›</div>
          </div>
        </div>

        <!-- 第四列：AI写作和意见反馈 -->
        <div class="card-column">
          <div class="service-card ai-writing-card" @click="goToAIWriting">
            <div class="service-header">
              <div class="service-icon">
                <img src="@/assets/new_index/7-1.png" alt="AI写作" class="icon-img">
              </div>
              <div class="service-title">AI写作</div>
            </div>
            <div class="service-description">一键创作公文,让文案更专业</div>
            <div class="service-tag" style="color: #16A34A;">开始创作 ›</div>
          </div>
          <div class="service-card feedback-card" @click="openFeedbackModal">
            <div class="service-header">
              <div class="service-icon">
                <img src="@/assets/new_index/9-1.png" alt="意见反馈" class="icon-img">
              </div>
              <div class="service-title">意见反馈</div>
            </div>
            <div class="service-description">助力产品升级,期待您的反馈</div>
            <div class="service-tag" style="color: #9333EA;">参与反馈 ›</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部版权信息 -->
    <div class="footer">
      <div class="footer-info">
        <span>工信部备案号: 蜀ICP备20251411234号-1</span>
        <span>川公网安备: 51010502011234号</span>
        <span>推荐电脑分辨率：1920*1080，1920*1200，3840*2160</span>
        <span>推荐浏览器：Google，Edge，火狐浏览器</span>
      </div>
    </div>

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

<script setup>
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import FeedbackModal from '@/components/FeedbackModal.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 userRecommendQuestions = ref([]) // 用户输入时获取的推荐问题
const isGettingRecommendQuestions = ref(false) // 是否正在获取推荐问题
const recommendQuestionsTimer = ref(null) // 防抖定时器
const showSuggestions = ref(false) // 是否显示联想建议

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

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

// 清空推荐问题
const clearRecommendQuestions = () => {
  userRecommendQuestions.value = []
  showSuggestions.value = false
  if (recommendQuestionsTimer.value) {
    clearTimeout(recommendQuestionsTimer.value)
    recommendQuestionsTimer.value = null
  }
}

// 处理输入框输入，获取联想问题
const handleInput = () => {
  // 如果输入内容为空，清空推荐问题
  if (!searchText.value.trim()) {
    clearRecommendQuestions()
    return
  }
  
  // 防抖获取推荐问题
  if (recommendQuestionsTimer.value) {
    clearTimeout(recommendQuestionsTimer.value)
  }
  
  // 延迟100ms后获取推荐问题，避免频繁调用
  recommendQuestionsTimer.value = setTimeout(() => {
    getUserRecommendQuestions(searchText.value)
  }, 100)
}

// 获取用户推荐问题
const getUserRecommendQuestions = async (userMessage) => {
  if (!userMessage || userMessage.trim().length === 0) {
    userRecommendQuestions.value = []
    showSuggestions.value = false
    return
  }
  
  // 如果正在发送消息，则不获取推荐问题
  if (isSending.value) {
    console.log('正在发送消息，跳过推荐问题获取')
    userRecommendQuestions.value = []
    showSuggestions.value = false
    return
  }
  
  try {
    console.log('开始获取用户推荐问题，用户输入:', userMessage)
    isGettingRecommendQuestions.value = true
    
    const response = await apis.getUserRecommendQuestion({ 
      user_message: userMessage.trim()
      // ===== 已删除：user_id - 后端从token解析 =====
    })
    
    console.log('用户推荐问题响应:', response)
    
    // 再次检查状态，防止在请求过程中状态发生变化
    if (isSending.value) {
      console.log('请求完成时状态已变化，不显示推荐问题')
      userRecommendQuestions.value = []
      showSuggestions.value = false
      return
    }
    
    if (response && response.data && response.data.questions && response.data.questions.length > 0) {
      userRecommendQuestions.value = response.data.questions
      showSuggestions.value = true
      console.log('用户推荐问题数据已设置:', userRecommendQuestions.value)
    } else {
      userRecommendQuestions.value = []
      showSuggestions.value = false
    }
  } catch (error) {
    console.error('获取用户推荐问题失败:', error)
    userRecommendQuestions.value = []
    showSuggestions.value = false
  } finally {
    isGettingRecommendQuestions.value = false
  }
}

// 处理联想问题点击
const handleUserRecommendQuestion = (question) => {
  console.log('选择用户推荐问题:', question)
  
  // 设置消息内容到输入框
  searchText.value = question
  
  // 清空推荐问题列表
  clearRecommendQuestions()
}

// 语音输入相关方法
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
  
  // 清空联想问题
  clearRecommendQuestions()
  
  try {
    console.log('搜索内容:', searchText.value)
    // 跳转到AI问答页面，并传递搜索内容
    router.push({
      path: '/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: '/chat',
    query: {
      autoMessage: question
    }
  })
}

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

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

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

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

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

// 退出登录
const handleLogout = () => {
  console.log('退出登录')
  performLogout()
}

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

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

// 点击外部区域关闭联想
const handleClickOutside = (event) => {
  if (!event.target.closest('.user-recommend-questions') && !event.target.closest('.search-box')) {
    clearRecommendQuestions()
  }
}

onMounted(() => {
  getRecommendQuestion()
  // 从本地存储获取用户名
  const username = getUsername()
  userInfo.value = {
    username: username || '蜀道用户'
  }
  console.log('用户信息:', userInfo.value)
  // 添加点击外部区域关闭联想的事件监听
  document.addEventListener('click', handleClickOutside)
})

// 组件卸载时移除事件监听
onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside)
  if (recommendQuestionsTimer.value) {
    clearTimeout(recommendQuestionsTimer.value)
  }
})
</script>

<style lang="less" scoped>

.container {
  width: 100%;
  height: 100vh;
  background-image: url('@/assets/new_index/2.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  // position: relative;
}

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

/* 主内容区域 */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px 0 20px 0;
  max-width: 1434px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/* 主标题 */
.main-title {
  font-size: 62px;
  font-weight: 900;
  color: #000B63;
  text-align: center;
  margin: 0;
  line-height: 1;
}

.sub-title {
  font-size: 24px;
  color: #000B63;
  text-align: center;
  margin: 15px 0 0 0;
}

/* 搜索框 */
.search-container {
  width: 100%;
  max-width: 1323px;
  margin: 30px 0 0 0;
  position: relative; /* 为联想问题提供定位参考 */
  
  .search-box {
    position: relative;
    width: 100%;
    height: 64.4px;
    border: 2px solid rgba(0, 11, 99, 0.5);
    border-radius: 11.5px;
    background: #ffffff;
    display: flex;
    align-items: center;
    padding: 0 20px;
    
    .search-input {
      flex: 1;
      height: 100%;
      border: none;
      outline: none;
      font-size: 16px;
      background: transparent;
      padding: 0 20px 0 0;
      
      &::placeholder {
        color: #9CA3AF;
      }
    }
    
    .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;
      }
      
      .icon-container {
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        position: relative;
      }
      
      .recording-indicator {
        position: absolute;
        top: -2px;
        right: -2px;
        width: 8px;
        height: 8px;
        background: #ef4444;
        border-radius: 50%;
        animation: blink 1s ease-in-out infinite;
      }
      
      .action-icon {
        width: 20px;
        height: 20px;
        max-width: 20px;
        max-height: 20px;
        object-fit: contain;
      }
    }
    
    .divider {
      width: 1px;
      height: 31px;
      background-color: #D6D5DE;
      margin: 0 12px;
    }
    
    .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;
      }
      
      .send-icon {
        width: 90px;
        height: 40px;
        object-fit: contain;
      }
    }
  }
}

/* 提问联想样式 */
.user-recommend-questions {
  position: absolute;
  top: 100%; /* 位于搜索框下方 */
  left: 0;
  right: 0;
  background: white;
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #E5E8EB;
  z-index: 10;
  margin-top: 8px;
  
  .recommend-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 280px; /* 限制高度，大约5条内容的高度 */
    overflow-y: auto; /* 超过高度时显示滚动条 */
    
    /* 自定义滚动条样式 */
    &::-webkit-scrollbar {
      width: 6px;
    }
    
    &::-webkit-scrollbar-track {
      background: #f1f5f9;
      border-radius: 3px;
    }
    
    &::-webkit-scrollbar-thumb {
      background: #cbd5e1;
      border-radius: 3px;
      
      &:hover {
        background: #94a3b8;
      }
    }
    
    .recommend-item {
      padding: 8px 10px;
      font-size: 16px;
      color: #000;
      cursor: pointer;
      transition: all 0.2s ease;
      line-height: 1.4;
      border-radius: 6px;
      
      &:hover {
        background-color: #f8fafc;
        color: #2563EB;
      }
      
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

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

/* 卡片区域 */
.cards-container {
  display: flex;
  gap: 28px;
  width: 100%;
  max-width: 1434px;
  margin: 35px 0 0 0;
}

.card-column {
  display: flex;
  flex-direction: column;
  gap: 28px;
  
  &.first-column {
    width: 338px;
  }
  
  &:nth-child(2) {
    width: 406px;
  }
  
  &:nth-child(3), &:nth-child(4) {
    width: 306px;
  }
}

/* 常见问题卡片 */
.common-questions-card {
  background-image: url('@/assets/new_index/3.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 338px;
  height: 462px;
  position: relative;
  
  .card-header {
    position: absolute;
    top: 28.75px;
    right: 24.2px;
    text-align: center;
    .refresh-button {
      background: rgba(255, 255, 255, 0.25);
      border: none;
      border-radius: 151.8px;
      height: 27.46px;
      width: 66.7px;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      
      &:hover {
        background: rgba(255, 255, 255, 0.4);
      }
      
      .refresh-text {
        font-size: 14px;
        color: #FFFFFF;
        font-weight: 500;
        line-height: 1;
      }
    }
  }
  
  .questions-content {
    position: absolute;
    top: 81px;
    left: 25px;
    right: 25px;
    bottom: 25px;
    background: #ffffff;
    border-radius: 22.97px;
    padding: 18px;
    overflow-y: auto;
    
    .questions-list {
      .question-item {
        margin-bottom: 15px;
        font-size: 18px;
        color: #0F2340;
        cursor: pointer;
        transition: all 0.3s ease;
        line-height: 1.4;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        
        &:hover {
          color: #2563EB;
          transform: translateX(5px);
        }
        
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}

/* 隐患提示卡片 */
.hazard-card {
  background-image: url('@/assets/new_index/4.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 406px;
  height: 217px;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-4px);
  }
  
  .card-title {
    position: absolute;
    left: 40px;
    top: 131.2px;
    font-size: 22px;
    color: #000000;
    font-weight: 600;
  }
  
  .card-description {
    position: absolute;
    left: 40px;
    top: 171.2px;
    font-size: 18px;
    color: #4B5563;
    line-height: 1.4;
  }
}

/* 安全培训卡片 */
.training-card {
  background-image: url('@/assets/new_index/5.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 406px;
  height: 217px;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-4px);
  }
  
  .card-title {
    position: absolute;
    left: 40px;
    top: 119.6px;
    font-size: 22px;
    color: #FFFFFF;
    font-weight: 600;
  }
  
  .card-description {
    position: absolute;
    left: 40px;
    top: 159.8px;
    font-size: 18px;
    color: #DBEAFE;
    line-height: 1.4;
  }
}


/* 服务卡片 */
.service-card {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 306px;
  height: 217px;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-4px);
  }
  
  &.exam-workshop-card {
    background-image: url('@/assets/new_index/6.png');
  }
  
  &.policy-document-card {
    background-image: url('@/assets/new_index/8.png');
  }
  
  &.ai-writing-card {
    background-image: url('@/assets/new_index/7.png');
  }
  
  &.feedback-card {
    background-image: url('@/assets/new_index/9.png');
  }
  
  .service-header {
    position: absolute;
    left: 50%;
    top: 40px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .service-icon {
    .icon-img {
      width: 40px;
      height: 40px;
      object-fit: contain;
    }
  }
  
  .service-title {
    font-size: 22px;
    color: #000000;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
  }
  
  .service-description {
    position: absolute;
    left: 50%;
    top: 102px;
    transform: translateX(-50%);
    font-size: 18px;
    color: #4B5563;
    line-height: 1;
    text-align: center;
    width: 100%;
  }
  
  .service-tag {
    position: absolute;
    left: 38px;
    top: 173px;
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
    

  }
}

/* 底部版权信息 */
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 57px;
  background-image: url('@/assets/new_index/10.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  
  .footer-info {
    display: flex;
    justify-content: center;
    gap: 158px;
    font-size: 14px;
    color: #6B7280;
    line-height: 1;
  }
}
</style>