# 微信小程序样式与布局实现方案

根据文档要求，本方案包含两部分核心内容：
1. **核心任务：“我的学校”界面布局**（综合运用标签选择器、类别选择器、ID选择器、`rpx/px` 尺寸单位以及 `Flex` 弹性盒布局，实现“学校介绍”、“导航”、“服务”、“我的”四个模块的页面结构与切换）。
2. **课堂练习：绝对定位（Position）示例**（实现天蓝色容器内纵向排列 `a`、`b`、`c` 三个绿色方块的布局）。

---

## 一、 核心任务：“我的学校”界面布局

### 1. 布局设计思路
* **整体页面结构**：使用标签选择器 `page` 设置 `height: 100vh; display: flex; flex-direction: column;`，确定整个页面为纵向弹性盒布局。
* **空间瓜分**：上方主体内容区 `#main-container` 设置 `flex: 1` 占满除底部导航栏外的所有剩余空间；底部导航栏 `.tab-bar` 固定高度为 `110rpx`。
* **多视图结构**：
  * **学校介绍**：分为上（左图 + 右侧新闻列表）、中（左侧四宫格图片 + 右侧通知列表）、下（三列专题卡片）三层 Flex 布局。
  * **导航**：整块校园地图导航展示区。
  * **服务**：采用左右分栏的 Flex 布局，左侧为固定宽度的纵向分类菜单（餐饮、快递、二手物品等），右侧为自适应剩余宽度的服务详情区。
  * **我的**：个人中心展示页。

---

### 2. 页面结构代码 (`pages/index/index.wxml`)

```html
<!-- 整体容器由 page 控制为 100vh 的纵向 Flex 布局 -->
<!-- 1. 上方主体内容区 -->
<view id="main-container">

  <!-- 视图一：学校介绍 -->
  <scroll-view wx:if="{{currentTab === 0}}" scroll-y="true" class="school-intro">
    <!-- 第一层：左图 + 右侧新闻列表 -->
    <view class="section-top">
      <view class="top-left-img">学校剪影图片</view>
      <view class="top-right-news">
        <view class="news-tabs">
          <text class="active-tab">学校要闻</text>
          <text>通知公告</text>
          <text>媒体校园</text>
        </view>
        <view class="news-item" wx:for="{{5}}" wx:key="*this">
          <text class="news-title">• 我校举办秋季校园文化节活动 {{index + 1}}</text>
          <text class="news-date">10-16</text>
        </view>
      </view>
    </view>

    <!-- 第二层：左侧四宫格图 + 右侧信息列表 -->
    <view class="section-middle">
      <view class="mid-left-grid">
        <view class="grid-box">校园风光</view>
        <view class="grid-box">教学楼群</view>
        <view class="grid-box">图书馆</view>
        <view class="grid-box">运动场</view>
      </view>
      <view class="mid-right-list">
        <view class="news-tabs">
          <text class="active-tab">教学科研</text>
          <text>招生就业</text>
        </view>
        <view class="news-item" wx:for="{{4}}" wx:key="*this">
          <text class="news-title">• 教务处关于本学期选课通知 {{index + 1}}</text>
          <text class="news-date">10-16</text>
        </view>
      </view>
    </view>

    <!-- 第三层：三列专题卡片 -->
    <view class="section-bottom">
      <view class="card-col" wx:for="{{['专题网站', '校园生活', '信息公开']}}" wx:key="*this">
        <view class="card-banner">{{item}}</view>
        <view class="card-list">
          <view class="card-line" wx:for="{{4}}" wx:key="*this">栏目链接条目</view>
        </view>
        <view class="card-more">更多</view>
      </view>
    </view>
  </scroll-view>

  <!-- 视图二：导航 -->
  <view wx:if="{{currentTab === 1}}" class="nav-page">
    <view class="map-placeholder">
      <text>校园地图导航区域</text>
    </view>
  </view>

  <!-- 视图三：服务（左菜单 + 右内容） -->
  <view wx:if="{{currentTab === 2}}" class="service-page">
    <!-- 左侧菜单栏 -->
    <view class="service-sidebar">
      <view 
        class="sidebar-item {{currentService === index ? 'sidebar-active' : ''}}" 
        wx:for="{{serviceList}}" 
        wx:key="*this"
        bindtap="switchService"
        data-index="{{index}}"
      >
        {{item}}
      </view>
    </view>
    <!-- 右侧服务详情区 -->
    <view class="service-content">
      <text>当前选中服务：{{serviceList[currentService] || '空白扩展项'}}</text>
    </view>
  </view>

  <!-- 视图四：我的 -->
  <view wx:if="{{currentTab === 3}}" class="my-page">
    <text>个人中心页面</text>
  </view>

</view>

<!-- 2. 底部导航栏 -->
<view class="tab-bar">
  <view 
    class="tab-item {{currentTab === index ? 'tab-active' : ''}}" 
    wx:for="{{tabs}}" 
    wx:key="*this"
    bindtap="switchTab"
    data-index="{{index}}"
  >
    {{item}}
  </view>
</view>
```

---

### 3. 页面样式代码 (`pages/index/index.wxss`)

```css
/* 1. 标签选择器：确定整个页面的布局（严格按照文档要求） */
page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  font-size: 26rpx;
  color: #333;
}

text {
  display: inline-block;
}

/* 3. ID选择器：上方主内容容器，瓜分父容器剩余空间 */
#main-container {
  flex: 1;
  display: flex;
  overflow: hidden;
  border-bottom: 2px solid #000;
}

/* 2. 类别选择器：底部导航栏 */
.tab-bar {
  height: 110rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
}

.tab-item {
  padding: 12rpx 24rpx;
  font-size: 32rpx;
}

/* 底部菜单选中态：还原原理图中的黑色方框效果 */
.tab-active {
  border: 2px solid #000;
  font-weight: bold;
}

/* ================= 视图一：学校介绍布局 ================= */
.school-intro {
  flex: 1;
  padding: 20rpx;
  box-sizing: border-box;
}

/* 第一层：左图右列表 */
.section-top {
  display: flex;
  flex-direction: row;
  height: 280rpx;
  margin-bottom: 24rpx;
}

.top-left-img {
  width: 280rpx;
  background-color: #d9e6f2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  border: 1px solid #ccc;
}

.top-right-news {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.news-tabs {
  display: flex;
  border-bottom: 1px solid #ddd;
  padding-bottom: 8rpx;
  gap: 20rpx;
  font-size: 24rpx;
}

.active-tab {
  color: #1a73e8;
  font-weight: bold;
}

.news-item {
  display: flex;
  justify-content: space-between;
  font-size: 22rpx;
  border-bottom: 1px dashed #eee;
  padding: 6rpx 0;
}

.news-title {
  width: 300rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 第二层：左四宫格右列表 */
.section-middle {
  display: flex;
  flex-direction: row;
  height: 280rpx;
  margin-bottom: 24rpx;
}

.mid-left-grid {
  width: 280rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
  margin-right: 20rpx;
}

.grid-box {
  width: 132rpx;
  height: 132rpx;
  background-color: #cfe2f3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22rpx;
  border: 1px solid #bbb;
}

.mid-right-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 第三层：底部三列卡片 */
.section-bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 340rpx;
}

.card-col {
  width: 31%;
  background-color: #fdf8f2;
  border: 1px solid #eee;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12rpx;
}

.card-banner {
  width: 100%;
  height: 90rpx;
  background-color: #e67e22;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.card-list {
  width: 90%;
}

.card-line {
  font-size: 20rpx;
  padding: 6rpx 0;
  border-bottom: 1px solid #f0e6da;
}

.card-more {
  font-size: 20rpx;
  border: 1px solid #999;
  padding: 2rpx 16rpx;
}

/* ================= 视图二：导航页面布局 ================= */
.nav-page {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  color: #666;
}

/* ================= 视图三：服务页面布局 ================= */
.service-page {
  flex: 1;
  display: flex;
  flex-direction: row;
}

.service-sidebar {
  width: 200rpx;
  border-right: 2px solid #000;
  display: flex;
  flex-direction: column;
}

.sidebar-item {
  height: 110rpx;
  border-bottom: 2px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
}

.sidebar-active {
  background-color: #f0f0f0;
  font-weight: bold;
}

.service-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
}

/* ================= 视图四：我的页面布局 ================= */
.my-page {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
}
```

---

### 4. 页面交互逻辑 (`pages/index/index.js`)

```javascript
Page({
  data: {
    // 底部导航菜单项
    tabs: ['学校介绍', '导航', '服务', '我的'],
    currentTab: 0, // 默认显示“学校介绍”

    // “服务”页左侧边栏菜单项（含原理图中的第四个空白格）
    serviceList: ['餐饮', '快递', '二手物品', ''],
    currentService: 0
  },

  // 切换底部导航栏
  switchTab(e) {
    const index = e.currentTarget.dataset.index;
    this.setData({
      currentTab: index
    });
  },

  // 切换“服务”页左侧分类
  switchService(e) {
    const index = e.currentTarget.dataset.index;
    this.setData({
      currentService: index
    });
  }
});
```

---

## 二、 附：文档中“使用绝对定位（Position）”练习代码

如果需要单独验证文档前半部分的**“使用绝对定位”**示例（天蓝色背景框内纵向两端对齐排列 `a`、`b`、`c` 三个绿色方块），可使用以下代码：

### 1. `WXML` 结构代码
```html
<view class="container">
  <text class="title">使用绝对定位</text>
  <view class="box">a</view>
  <view class="box">b</view>
  <view class="box">c</view>
</view>
```

### 2. `WXSS` 样式代码
```css
/* 按照文档给定的定位与 Flex 样式参数编写 */
.container {
  width: 300rpx;
  height: 500rpx;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  left: 200rpx;
  top: 200rpx;
  background-color: skyblue;
  border: 1px solid #000;
}

.title {
  align-self: flex-start;
  font-size: 28rpx;
}

.box {
  width: 100rpx;
  height: 100rpx;
  background-color: #1aa01a;
  color: #fff;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36rpx;
}
```