nongxiaoyu/pages/service/insurance.vue

<template>
  <view class="insurance-container">
    <!-- 顶部横幅 -->
    <view class="banner-section">
      <view class="banner-content">
        <image class="banner-bg" src="/static/images/agriculture/rice-field2.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="insurance-types">
          <view class="type-item">
            <view class="type-header">
              <text class="type-title">作物种植险</text>
            </view>
            <text class="type-desc">水稻、小麦、玉米等主要农作物种植保障</text>
          </view>
          
          <view class="type-item">
            <view class="type-header">
              <text class="type-title">农机具保险</text>
            </view>
            <text class="type-desc">拖拉机、植保无人机等农机设备保障</text>
          </view>
          
          <view class="type-item">
            <view class="type-header">
              <text class="type-title">农田财产保险</text>
            </view>
            <text class="type-desc">农田设施、仓储设备等财产保障</text>
          </view>
          
          <view class="type-item">
            <view class="type-header">
              <text class="type-title">农业自然灾害险</text>
            </view>
            <text class="type-desc">洪涝、干旱、冰雹等自然灾害保障</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="process-steps">
          <view class="step-item">
            <view class="step-number">1</view>
            <view class="step-content">
              <text class="step-title">咨询保险方案</text>
              <text class="step-desc">了解各类保险产品和保障范围</text>
            </view>
          </view>
          
          <view class="step-item">
            <view class="step-number">2</view>
            <view class="step-content">
              <text class="step-title">提交申请材料</text>
              <text class="step-desc">准备身份证明、土地证明等相关资料</text>
            </view>
          </view>
          
          <view class="step-item">
            <view class="step-number">3</view>
            <view class="step-content">
              <text class="step-title">线下签约与缴费</text>
              <text class="step-desc">前往服务点签署保险合同并缴纳保费</text>
            </view>
          </view>
          
          <view class="step-item">
            <view class="step-number">4</view>
            <view class="step-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 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="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-value">张老师</text>
          </view>
          <view class="contact-item">
            <view class="contact-label">联系电话：</view>
            <text class="contact-phone" @click="makePhoneCall">400-456-7890</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-456-7890',
    fail: (err) => {
      uni.showToast({
        title: '拨打电话失败',
        icon: 'none'
      })
    }
  })
}
</script>

<style lang="scss">
.insurance-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;
}

// 可投保项目
.insurance-types {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.type-item {
  padding: 24rpx;
  background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
  border-radius: 16rpx;
  border: 1rpx solid #e2e8f0;
  border-left: 4rpx solid #4CAF50;
}

.type-header {
  margin-bottom: 12rpx;
}

.type-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #2d3748;
}

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

// 参保流程
.process-steps {
  display: flex;
  flex-direction: column;
  gap: 28rpx;
}

.step-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);
  }
}

.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);
  flex-shrink: 0;
}

.step-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;
}

// 联系方式
.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>