<template>
  <view class="mt-[30rpx]">
    <RoundedBorder>
      <template>
        <view
          class="h-[612rpx] rounded-[40rpx] bg-white grid grid-cols-2 grid-rows-2 p-[20rpx] relative"
        >
          <view
            class="text-[#3d3d3d] p-[20rpx] bg-[linear-gradient(to_top,_#EFF4FE_0%,_#ffffff_20%)] triangle-b"
          >
            <view class="text-[32rpx] font-700">高效课堂</view>
            <view class="text-[24rpx] mt-[8rpx]">
              独特的“361生本”高效课堂教学模式：密节奏、小台阶、精练习、反复练的教学策略。
            </view>
          </view>

          <view
            class="text-[#3d3d3d] p-[20rpx] bg-[linear-gradient(to_right,_#EFF4FE_0%,_#ffffff_20%)] triangle-l"
          >
            <view class="text-[32rpx] font-700 text-right">分层教学</view>
            <view class="text-[24rpx] mt-[8rpx] text-right">
              根据学生基础分类编班，拔尖学生享“一对一师资+定制方案”，也可自主预约一对一辅导，满足个性化需求。
            </view>
          </view>

          <view
            class="text-[#3d3d3d] pt-[62rpx] px-[20rpx] pb-[20rpx] bg-[linear-gradient(to_left,_#EFF4FE_0%,_#ffffff_20%)] triangle-r"
          >
            <view class="text-[32rpx] font-700">教研准备</view>
            <view class="text-[24rpx] mt-[8rpx]">
              依托“大成高中联盟”共享教学资源，紧跟命题趋势。实行每日备课、一课一研，邀请专家讲座，提升备考效率。
            </view>
          </view>

          <view
            class="text-[#3d3d3d] pt-[62rpx] px-[20rpx] pb-[20rpx] bg-[linear-gradient(to_bottom,_#EFF4FE_0%,_#ffffff_20%)] triangle-t"
          >
            <view class="text-[32rpx] font-700 text-right">学情跟踪</view>
            <view class="text-[24rpx] mt-[8rpx] text-right">
              实施三轮复习+周月模考，每次考后开展成绩分析和教学调整，精准跟踪学情，提升复习效果。
            </view>
          </view>

          <view class="top-[50%] left-[50%] absolute translate-x-[-50%] translate-y-[-50%]">
            <image
              src="https://api-static-zhiy.oss-cn-shanghai.aliyuncs.com/images/ad-banner/zhongjian.png"
              mode="scaleToFill"
              class="w-[184rpx] h-[184rpx]"
            />
          </view>
        </view>
      </template>
    </RoundedBorder>
  </view>
</template>

<script lang="ts" setup>
import RoundedBorder from './RoundedBorder.vue'
</script>

<style lang="scss" scoped>
.triangle-b {
  position: relative;
  &::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 42rpx;
    border-left: 18rpx solid transparent;
    border-right: 18rpx solid transparent;
    border-top: 18rpx solid transparent;
    border-bottom: 18rpx solid #fff;
  }
}

.triangle-l {
  position: relative;
  &::before {
    content: '';
    position: absolute;
    top: 38rpx;
    left: 0;
    border-left: 18rpx solid #fff;
    border-right: 18rpx solid transparent;
    border-top: 18rpx solid transparent;
    border-bottom: 18rpx solid transparent;
  }
}

.triangle-r {
  position: relative;
  &::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 38rpx;
    border-left: 18rpx solid transparent;
    border-right: 18rpx solid #fff;
    border-top: 18rpx solid transparent;
    border-bottom: 18rpx solid transparent;
  }
}

.triangle-t {
  position: relative;
  &::before {
    content: '';
    position: absolute;
    top: 0;
    right: 38rpx;
    border-left: 18rpx solid transparent;
    border-right: 18rpx solid transparent;
    border-top: 18rpx solid #fff;
    border-bottom: 18rpx solid transparent;
  }
}
</style>
