vue3-mgt-template/demoHtml/flex/GEMINI.md

## 项目概述
帮我实现一个纯静态的，只包含html和css的页面（不需要js代码的实现），分为左中右布局，其中中间布局内容不需要你添加，我自己已有代码实现

## 技术栈
- **html5**
- **css3**
- **javascript**

## DOM结构
```html
<div id="app">
    <!-- 组件列表 -->
    <div id="components-panel"></div>
    <!-- 画布容器 -->
    <div id="canvas-panel"></div>
    <!-- 当前选中组件属性 -->
    <div id="props-panel"></div>
</div>
```

## 组件列表
* 组件列表分为两栏布局，当分辨率过低时只支持一栏布局
* 组件UI展示需要有代表性，能让用户清晰知道当前组件类型
* 组件列表
    - 轮播图
    - 搜索
    - 热门频道
    - 直播
    - 推荐内容
    - 快捷入口

## 组件属性
* 以表单形式展示
* 表单字段为以下字段:
    - 名称
    - 图片
    - 描述
    - 跳转链接

## 要求
* 页面自适应，不需要兼容移动端，左边1份，右边1份，中间占5份并且占满剩余全部，无论左中右内部内容超出页面高度，都只在内部滚动
* 页面滚动条样式美化
* 页面布局要求美观大方，间距合理，色彩风格一致
* 不使用第三方UI库
* css相关代码请放在css/index.css文件中