sxc-frontend/web/src/components/SsCommonProblem.vue

<script setup lang="ts">
import {ref, defineEmits, onMounted} from 'vue'
import {Refresh} from '@element-plus/icons-vue'
import {useGlobalStore} from "@/stores/global";

const emit = defineEmits(['finish', 'quickSend', 'loaded'])
const global = useGlobalStore()

const isRefresh = ref(false);

const refresh = () => {
  isRefresh.value = true;
  global.loadCommonProblem('', () => {
    isRefresh.value = false;
    emit('finish')
  })
}

const quickSend = (msg: string) => {
  emit('quickSend', msg)
}

defineExpose({
  refresh
});

onMounted(() => {
  emit('loaded', 'footer')
})
</script>

<template>
  <div class="problem hover-scale">
    <div class="problem-content">
      <div class="header">
        <el-image class="header-logo" src="/images/common_problem.png" fit="contain"/>
        <div class="header-content">
          <div class="header-title">常见问题</div>
          <div class="header-subject">聚焦商贸投资热点，回应企业民生关切</div>
          <el-button class="refresh is-mobile" :icon="Refresh" :loading="isRefresh" @click="refresh">
            换一换
          </el-button>
        </div>
      </div>
      <div class="problem-list">
        <template v-for="(item, index) in global.commonProblem">
          <div class="problem-item ellipsis" @click="quickSend(item.questionContent)">
            {{ index + 1 }}.{{ item.questionContent }}
          </div>
        </template>
      </div>
    </div>
    <el-image class="problem-image is-pc" fit="contain" src="/images/bg01.png"/>
    <el-image class="problem-image is-mobile" fit="contain" src="/images/bg011.png"/>
  </div>
</template>

<style scoped lang="scss">
.problem {
  border-radius: var(--border-radius);
  position: relative;
  overflow: hidden;
  color: #ffffff;
  background: linear-gradient(180deg, #5A92F8, #2943D6);
  box-shadow: 0 0.25rem 1.25rem 0 rgba(52, 149, 239, 0.4);
  min-height: 16rem;

  .problem-content {
    position: relative;
    z-index: 2;
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 1.25);

    .header {
      display: flex;
      align-items: center;
      margin-bottom: 2.45rem;

      .header-logo {
        width: 2.13rem;
        height: 2.13rem;
        margin-right: 0.5rem;
      }

      .header-content {
        width: calc(100% - 2.65rem);
        position: relative;

        .header-title {
          font-size: var(--body-font-size);
          font-weight: 600;
          margin-bottom: 0.3rem;
          line-height: 1.2em;
          cursor: pointer;
        }

        .header-subject {
          font-size: var(--small-font-size);
          font-weight: 400;
          line-height: 1.3em;
          cursor: pointer;
        }

        .refresh {
          position: absolute;
          right: 0;
          top: 0;
          padding: 0;
          line-height: 0.75rem;
          font-size: 0.75rem;
          height: 0.75rem;
          color: #FFEF7C;
          background-color: transparent;
          border: 0;
        }
      }
    }

    .problem-list {
      .problem-item {
        font-size: var(--small-font-size);
        line-height: 1.5em;
        margin-bottom: 0.65rem;
        cursor: pointer;
        padding-bottom: 0.1rem;
        min-height: var(--min-touch-target);
        display: flex;
        align-items: center;

        &:last-child {
          margin-bottom: 0;
        }

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }

  .problem-image {
    position: absolute;
    bottom: 0;
    right: 1rem;
    width: 18rem;
    height: 10rem;
    z-index: 1;
    background-size: contain;
  }
}

/* 1080x1920 中等尺寸设备 - 垂直布局优化 */
@media screen and (min-width: 751px) and (max-width: 1200px) and (min-height: 1700px) {
  .problem {
    min-height: 20rem;
    box-shadow: 0 0.5rem 1.5rem 0 rgba(52, 149, 239, 0.5);

    .problem-content {
      padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 1.75);

      .header {
        margin-bottom: 3rem;

        .header-logo {
          width: 3rem;
          height: 3rem;
          margin-right: 0.75rem;
        }

        .header-content {
          width: calc(100% - 3.75rem);

          .header-title {
            font-size: 1.75rem; /* 1.5rem → 1.75rem */
            margin-bottom: 0.5rem;
          }
        }
      }

      .problem-list {
        .problem-item {
          margin-bottom: 1rem;
        }
      }
    }

    .problem-image {
      width: 22rem;
      height: 12rem;
    }
  }
}

@media screen and (max-width: 750px) {
  .problem {
    .problem-content {
      .header {
        margin-bottom: 1.5rem;
      }
    }

    .problem-image {
      width: 7.94rem;
      height: 7.81rem;
      bottom: 1rem;
      right: 0.75rem;
    }
  }
}
</style>