<template>
  <view class="container">
    <!-- 搜索栏 -->
    <view class="search-bar">精选企业</view>

    <!-- 格子布局 -->
    <view class="grid-container">
      <view class="grid-item blue">
        <text class="title">事业单位</text>
        <view class="status">已关注 ✓</view>
      </view>

      <view class="grid-item green">
        <text class="title">银行招聘</text>
        <view class="status">特别关注</view>
      </view>

      <view class="grid-item orange">
        <text class="title">世界500强</text>
        <view class="status">特别关注</view>
      </view>

      <view class="grid-item red">
        <text class="title">中国500强</text>
        <view class="status">特别关注</view>
      </view>
    </view>
  </view>
</template>

<style lang="stylus" scoped>
/* 页面整体样式 */
.container
  background-color #edf4ff
  height 100%
  display flex
  flex-direction column
  padding 20rpx

/* 搜索栏样式 */
.search-bar
  font-size 32rpx
  font-weight bold
  color #333
  margin-bottom 20rpx

/* 格子布局样式 */
.grid-container
  display flex
  flex-wrap wrap
  justify-content space-between
  gap 20rpx

.grid-item
  width 48%
  height 200rpx
  border-radius 20rpx
  display flex
  flex-direction column
  justify-content center
  align-items center
  color #fff
  font-size 28rpx
  font-weight bold
  position relative

  .status
    position absolute
    bottom 20rpx
    font-size 24rpx
    background-color rgba(255, 255, 255, 0.9)
    color #333
    padding 5rpx 15rpx
    border-radius 15rpx

/* 每种格子对应的颜色 */
.blue
  background-color #3b82f6

.green
  background-color #22c55e

.orange
  background-color #f59e0b

.red
  background-color #ef4444
</style>
