app/pages/customerService/index.vue

<template>
  <s-layout>
    <view class="customer-service">
      <view class="title">联系客服</view>
      <view class="subtitle">我们随时为您服务</view>
      <view class="qrcode-container">
        <view class="qrcode-item">
          <view class="qrcode-wrapper">
            <image class="qrcode" src="/static/images/qrcode1.jpg" mode="aspectFit"></image>
          </view>
          <view class="desc">
            <text class="name">客服小美</text>
            <text class="tag">主营业务咨询</text>
          </view>
        </view>
        <view class="qrcode-item">
          <view class="qrcode-wrapper">
            <image class="qrcode" src="/static/images/qrcode2.jpg" mode="aspectFit"></image>
          </view>
          <view class="desc">
            <text class="name">客服小丽</text>
            <text class="tag">售后服务专员</text>
          </view>
        </view>
      </view>
      <view class="tips">
        <text class="tips-icon">💡</text>
        <text>扫描以上二维码添加客服微信</text>
      </view>
      <view class="contact-time">服务时间: 周一至周日 9:00-21:00</view>
    </view>
  </s-layout>
</template>

<script setup>
</script>

<style lang="scss" scoped>
.customer-service {
  padding: 40rpx;
  background: linear-gradient(to bottom, #f8f9fa, #ffffff);
  // min-height: 100vh;

  .title {
    font-size: 44rpx;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20rpx;
    color: #333;
  }

  .subtitle {
    font-size: 28rpx;
    color: #666;
    text-align: center;
    margin-bottom: 60rpx;
  }

  .qrcode-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 50rpx;

    .qrcode-item {
      text-align: center;

      .qrcode-wrapper {
        background: #fff;
        padding: 20rpx;
        border-radius: 20rpx;
        box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.05);
        margin-bottom: 30rpx;
        transition: all 0.3s ease;

        &:hover {
          transform: translateY(-5rpx);
          box-shadow: 0 15rpx 30rpx rgba(0, 0, 0, 0.1);
        }

        .qrcode {
          width: 280rpx;
          height: 280rpx;
          border-radius: 10rpx;
        }
      }

      .desc {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10rpx;

        .name {
          font-size: 32rpx;
          color: #333;
          font-weight: 500;
        }

        .tag {
          font-size: 24rpx;
          color: #666;
          background: #f5f6f7;
          padding: 6rpx 20rpx;
          border-radius: 20rpx;
        }
      }
    }
  }

  .tips {
    font-size: 28rpx;
    color: #666;
    text-align: center;
    margin-bottom: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10rpx;

    .tips-icon {
      font-size: 32rpx;
    }
  }

  .contact-time {
    font-size: 26rpx;
    color: #999;
    text-align: center;
    padding: 20rpx;
    background: #f8f9fa;
    border-radius: 10rpx;
  }
}
</style>