Small_goose_Vue3/pages/mine/service.vue

<template>
  <view class="service-container">
    <view class="service-title">在线客服</view>
    <view class="service-box">
      <image src="/static/logo.png" class="service-avatar" />
      <view class="service-welcome">您好，有任何问题可随时联系小鹅客服！</view>
      <button class="faq-btn">常见问题</button>
      <button class="contact-btn">联系客服</button>
    </view>
  </view>
</template>
<script>
export default {}
</script>
<style lang="scss">
.service-container {
  min-height: 100vh;
  background: #f7f8fa;
  padding-bottom: 120rpx;
}
.service-title {
  text-align: center;
  font-size: 36rpx;
  font-weight: bold;
  color: #222;
  padding: 48rpx 0 32rpx 0;
}
.service-box {
  background: #fff;
  border-radius: 20rpx;
  margin: 0 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48rpx 24rpx 48rpx 24rpx;
}
.service-avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-bottom: 24rpx;
}
.service-welcome {
  font-size: 28rpx;
  color: #555;
  margin-bottom: 32rpx;
  text-align: center;
}
.faq-btn {
  width: 80%;
  background: #f7f8fa;
  color: #409EFF;
  border-radius: 12rpx;
  font-size: 28rpx;
  margin-bottom: 18rpx;
}
.contact-btn {
  width: 80%;
  background: #409EFF;
  color: #fff;
  border-radius: 12rpx;
  font-size: 32rpx;
}
</style>