xuyueandClaude Opus 5.5
de277d3e9d
- bunfig.toml 的 [fmt]：不写分号、单引号、一行最长 160，和原来的写法一致 - .prettierignore：docs/教材摘要/ 是书上的摘录，不格式化 - 模板里一行写两条语句的事件处理（@keydown.delete、@dblclick）改成调用方法：去掉分号后拆成两行，Vue 编译不过 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
39 lines
3.1 KiB
Markdown
39 lines
3.1 KiB
Markdown
## 任务目标
|
||
|
||
开始做项目 8 的"智慧校园管理平台"：先做主界面。主界面没有标题栏，上面一条蓝色标题栏放"智慧校园"标题图，下面是校园背景图，背景上有"校园环境""校园安防""退出"三个图标；点"退出"关闭程序。后面四个任务都在这个程序上接着做。
|
||
|
||
练习重点：无边框窗体（FormBorderStyle）、面板（Panel）的停靠（Dock）、背景图片、图片框（PictureBox）和项目资源里的图片。详细步骤见书 p157–159。
|
||
|
||
## 界面和控件名
|
||
|
||
| 控件 | 名称（Name） | 文字（Text）和用途 |
|
||
| ------ | ----------------- | ------------------------------------------------------------------------------ |
|
||
| 窗体 | `Main` | 主界面；FormBorderStyle 设为 None，StartPosition 设为 CenterScreen |
|
||
| 面板 | `panel1` | 顶部标题栏：停靠 Top，背景色 53, 147, 237 |
|
||
| 图片框 | `pictureBox1` | 放在 panel1 上，图片 `ico_title`（"智慧校园"标题），SizeMode 设为 StretchImage |
|
||
| 面板 | `panel2` | 停靠 Fill，背景图片 `bg_home`（校园），背景排列 Stretch |
|
||
| 图片框 | `pic_environment` | "校园环境"入口，图片 `icon_02` |
|
||
| 图片框 | `pic_security` | "校园安防"入口，图片 `icon_03` |
|
||
| 图片框 | `pic_exit` | "退出"，图片 `icon_04` |
|
||
|
||
> 三个图标放在 panel2 的背景图上，背景色都设成 **Transparent**，否则图标四周会露出一块灰色。
|
||
|
||
## 实现步骤
|
||
|
||
1. 点代码上方的**项目资源**，勾选 `ico_title`、`bg_home`、`icon_02`、`icon_03`、`icon_04` 五张图片。
|
||
2. 设置窗体：无边框、屏幕居中。
|
||
3. 拖两个面板：panel1 停靠 Top 当标题栏，里面放标题图；panel2 停靠 Fill，设背景图。
|
||
4. 在 panel2 上放三个图片框，按上表设名字、图片和透明背景。
|
||
5. 双击 `pic_exit`，在它的 Click 里写 `this.Close();`。窗体没有标题栏和关闭按钮，只能靠这个图标退出程序。
|
||
|
||
## 和书上不一样的地方
|
||
|
||
> **图片从项目资源里选**：书上第 2 步把配套资料里的 Resources 文件夹复制到工程里。平台上点**项目资源**，从素材库里勾选同名图片（平台自己画的，名字和尺寸与书上一致），设计器里"图片""背景图片"属性就能选到它们。
|
||
|
||
> **窗体名 Main**：在设计器里点窗体空白处，把属性窗口的**名称**从 `Form1` 改成 `Main`，类名、文件名和 Program.cs 会跟着改。任务 2 的自动评分要找到 Main 窗体。
|
||
|
||
## 在平台上怎么试
|
||
|
||
1. 运行后，运行区显示没有标题栏的主界面：蓝色标题栏上是"智慧校园"，下面是校园背景和三个图标（窗体比运行区大时会按比例缩小，点**放大**看得更清楚）。
|
||
2. 点"退出"图标，程序应结束。
|