flat: 页面初始化

packageA/pages/choiceness/choiceness.vue

@@ -0,0 +1,88 @@
+<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>