nongxiaoyu/pages/service/certification.vue

<template>
  <view class="certification-container">
    <!-- 顶部横幅 -->
    <view class="banner-section">
      <view class="banner-content">
        <image class="banner-bg" src="/static/images/agriculture/rice-field1.svg" mode="aspectFill"></image>
        <view class="banner-overlay">
          <view class="banner-text">
            <text class="main-title">绿色认证服务</text>
            <text class="sub-title">推动绿色农业发展，打造生态优质农产品</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 什么是绿色认证 -->
    <view class="info-card">
      <view class="card-header">
        <text class="card-title">什么是绿色认证？</text>
      </view>
      <view class="card-content">
        <text class="description-text">
          绿色食品认证是指符合无污染、无公害标准的农产品生产体系，经权威机构审核颁发的绿色标识，具有较高市场认可度。绿色认证不仅代表着农产品的高品质和安全性，更是农业可持续发展的重要标志，有助于提升农产品市场竞争力和消费者信任度。
        </text>
      </view>
    </view>

    <!-- 认证流程 -->
    <view class="info-card">
      <view class="card-header">
        <text class="card-title">认证流程</text>
      </view>
      <view class="card-content">
        <view class="process-list">
          <view class="process-item">
            <view class="process-step">
              <view class="step-number">1</view>
            </view>
            <view class="process-content">
              <text class="step-title">提交申请</text>
              <text class="step-desc">准备相关资料，提交绿色认证申请</text>
            </view>
          </view>
          
          <view class="process-item">
            <view class="process-step">
              <view class="step-number">2</view>
            </view>
            <view class="process-content">
              <text class="step-title">资料审核</text>
              <text class="step-desc">专业机构进行现场检查和资料评审</text>
            </view>
          </view>
          
          <view class="process-item">
            <view class="process-step">
              <view class="step-number">3</view>
            </view>
            <view class="process-content">
              <text class="step-title">获取证书</text>
              <text class="step-desc">审核通过后颁发绿色认证证书</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 认证优势 -->
    <view class="info-card">
      <view class="card-header">
        <text class="card-title">认证优势</text>
      </view>
      <view class="card-content">
        <view class="advantage-list">
          <view class="advantage-item">
            <text class="advantage-text">提升农产品销售价格</text>
          </view>
          <view class="advantage-item">
            <text class="advantage-text">增强产品质量安全保障</text>
          </view>
          <view class="advantage-item">
            <text class="advantage-text">可用于政府扶持与项目申报</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 适用范围 -->
    <view class="info-card">
      <view class="card-header">
        <text class="card-title">适用范围</text>
      </view>
      <view class="card-content">
        <view class="scope-content">
          <text class="scope-text">
            适用于种植类地块（如水稻、玉米、葡萄等农作物），申请人需具备土地权属证明或经营权证明，并通过农残检测。认证范围涵盖农产品生产、加工、包装、储存、运输等全产业链环节，确保产品从田间到餐桌的全程质量安全。
          </text>
        </view>
      </view>
    </view>

    <!-- 联系方式 -->
    <view class="info-card">
      <view class="card-header">
        <text class="card-title">联系方式</text>
      </view>
      <view class="card-content">
        <view class="contact-list">
          <view class="contact-item">
            <view class="contact-label">联系人：</view>
            <text class="contact-value">李老师</text>
          </view>
          <view class="contact-item">
            <view class="contact-label">联系电话：</view>
            <text class="contact-phone" @click="makePhoneCall">400-123-4567</text>
          </view>
          <view class="contact-item">
            <view class="contact-label">服务时间：</view>
            <text class="contact-value">工作日 9:00-17:30</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部提示信息 -->
    <view class="notice-card">
      <view class="notice-content">
        <text class="notice-text">
          绿色认证服务需线下办理，平台仅提供政策引导与信息对接。如需办理，请拨打联系电话。
        </text>
      </view>
    </view>
  </view>
</template>

<script setup>
const makePhoneCall = () => {
  uni.makePhoneCall({
    phoneNumber: '400-123-4567',
    fail: () => {
      uni.showToast({
        title: '拨打电话失败',
        icon: 'none'
      })
    }
  })
}
</script>

<style lang="scss">
.certification-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 40rpx;
}

// 顶部横幅
.banner-section {
  position: relative;
  height: 400rpx;
  overflow: hidden;
}

.banner-content {
  position: relative;
  width: 100%;
  height: 100%;
}

.banner-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.85) 0%, rgba(46, 125, 50, 0.9) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-text {
  text-align: center;
  color: #fff;
  padding: 0 40rpx;
}

.main-title {
  font-size: 52rpx;
  font-weight: 700;
  margin-bottom: 20rpx;
  display: block;
  letter-spacing: 2rpx;
  text-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
}

.sub-title {
  font-size: 30rpx;
  opacity: 0.95;
  line-height: 1.5;
  display: block;
  font-weight: 400;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

// 信息卡片
.info-card {
  margin: 20rpx;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06);
  overflow: hidden;
  border: 1rpx solid #f5f5f5;
}

.card-header {
  display: flex;
  align-items: center;
  padding: 32rpx;
  background: linear-gradient(135deg, #f8fffe 0%, #f0fdf4 100%);
  border-bottom: 1rpx solid #e8f5e8;
}



.card-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #1a1a1a;
}

.card-content {
  padding: 30rpx;
}

// 描述文字
.description-text {
  font-size: 30rpx;
  color: #4a5568;
  line-height: 1.7;
  font-weight: 400;
}

// 认证流程
.process-list {
  display: flex;
  flex-direction: column;
  gap: 28rpx;
}

.process-item {
  display: flex;
  align-items: flex-start;
  gap: 24rpx;
  padding: 24rpx;
  background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
  border-radius: 16rpx;
  border: 1rpx solid #e2e8f0;
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-2rpx);
    box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.08);
  }
}

.process-step {
  flex-shrink: 0;
}

.step-number {
  width: 64rpx;
  height: 64rpx;
  background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
  color: #fff;
  border-radius: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  font-weight: 600;
  box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.3);
}

.process-content {
  flex: 1;
  padding-top: 4rpx;
}

.step-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 12rpx;
  display: block;
}

.step-desc {
  font-size: 28rpx;
  color: #718096;
  line-height: 1.5;
  display: block;
}

// 认证优势
.advantage-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.advantage-item {
  padding: 24rpx;
  background: linear-gradient(135deg, #f8fff8 0%, #f0fdf4 100%);
  border-radius: 16rpx;
  border: 1rpx solid #e8f5e8;
  transition: all 0.3s ease;
  border-left: 4rpx solid #4CAF50;
  
  &:hover {
    transform: translateY(-2rpx);
    box-shadow: 0 8rpx 16rpx rgba(76, 175, 80, 0.1);
  }
}



.advantage-text {
  font-size: 30rpx;
  color: #2c3e50;
  font-weight: 500;
  line-height: 1.4;
}

// 适用范围
.scope-content {
  padding: 28rpx;
  background: linear-gradient(135deg, #f0fff4 0%, #ecfdf5 100%);
  border-radius: 16rpx;
  border: 1rpx solid #d1fae5;
}

.scope-text {
  font-size: 30rpx;
  color: #4a5568;
  line-height: 1.7;
  font-weight: 400;
}

// 联系方式
.contact-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.contact-item {
  display: flex;
  align-items: center;
  padding: 20rpx 24rpx;
  background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
  border-radius: 12rpx;
  border: 1rpx solid #e2e8f0;
}

.contact-label {
  font-size: 30rpx;
  color: #718096;
  width: 150rpx;
  flex-shrink: 0;
  font-weight: 500;
}

.contact-value {
  font-size: 30rpx;
  color: #2d3748;
  font-weight: 600;
}

.contact-phone {
  font-size: 30rpx;
  color: #4CAF50;
  font-weight: 600;
  padding: 8rpx 16rpx;
  background-color: #f0fdf4;
  border-radius: 8rpx;
  border: 1rpx solid #d1fae5;
  transition: all 0.3s ease;
  
  &:active {
    transform: scale(0.98);
    background-color: #dcfce7;
  }
}

// 底部提示
.notice-card {
  margin: 20rpx;
  background: linear-gradient(135deg, #fff8e1 0%, #fffde7 100%);
  border: 1rpx solid #f9e79f;
  border-radius: 16rpx;
  padding: 28rpx;
  box-shadow: 0 4rpx 12rpx rgba(255, 193, 7, 0.1);
}

.notice-content {
  text-align: center;
}



.notice-text {
  font-size: 28rpx;
  color: #8d4e00;
  line-height: 1.6;
  flex: 1;
  font-weight: 500;
}
</style>