# webdc-imitation

**Repository Path**: pdkax/webdc-imitation

## Basic Information

- **Project Name**: webdc-imitation
- **Description**: 印记中文仿写
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-03-19
- **Last Updated**: 2023-03-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 印记中文组件化重写一遍
mian采用的布局方式是左侧固定中部内容自动适应
`@media (max-width: 1010px)` 左侧导航大于**1010px**




## flowPath
1. 先实现静态页面  组件化
    1.css的命名方式 采用连字符分隔法
    2.要考虑响应式
    5.发生动画的结构,必须在外面包裹一层。
模仿中文的类名写一遍，记录下常用的类名

## css命名
我想把印记中文的CSS命名方式抄一遍。
`object-fit`: CSS属性的设置
1. 给body设置一个最小宽度`min - width:870px`  why
2. body设置一些常用样式以供继承 color, font-family, bg 行高 等等...
3. 没必要去抄他解构，自己去写样式
4. 关于提取CSS变量,我就不提取了，设计稿跟ui交流。什么地方放什么颜色
5. 响应式宽度最好设计成百分比
6. 列表一行显示两个列表，但是之间有空格,容器可以宽度设置为**一个列表**加上右边距。方便写样式



## idea
是否去借助别人，的开源库实现一些功能，暂时不考虑
如果借助开源库的话
1.一个是轮播
2. 另一个是自己控制


### 中部内容
占百分之`80%`，一侧固定一侧自动适应


# 实现功能
1. 滚动监听
    1.我记得当时想了两个方案
## 滚动监听
```javascript
124  618 962  //这三个值
```
头部宽度为60, 中间间隔为20, section-header的宽度为`44`。当滚动的距离，求出小于的最小**index**
未查找到说明值`val==-1`，此时应该为`this.menus.length-1`
2. `// this.showTagIndex = this.menus.findIndex((elm) =>DISTANCETOP < elm.getBoundingClientRect().bottom)`
    1. 还是求一个**index**,不过

3. 点击滚动到指定位置
滚动监听获取到了一个数组,减去当前**头部高度**。就是当前应该滚动到的位置



## do
1. 搞清楚需求
2. 弄明白之前自己是如何实现代码功能。
    1. 我遇到哪些问题
    2. 踩过哪些坑
3. 确定新的方案如何编码
4. 输出一篇博客,总结此次编码