1.本地项目和 gitee 的说明
本地的 website-demo是公司官网项目，但是 gitee 里面的website-demo是那个最简单的项目框架，不要搞混了！
2.background-attachment: fixed;属性
实现上下滚屏覆盖轮播的效果：
<div class="pics-wapper">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>.pics-wapper {
width: 100%;
height: auto;
& > ul {
li {
width: 100%; //100vw会溢出！
height: 100vh;
display: block;
&:first-child {
background: url("@/assets/img/history_1.png") no-repeat center;
background-size: contain;
background-attachment: fixed;
}
&:nth-child(2) {
background: url("@/assets/img/qsh.jpg") no-repeat center;
background-size: cover;
background-attachment: fixed;
}
&:nth-child(3) {
background: url("@/assets/img/history_2.png") no-repeat center;
background-size: cover;
background-attachment: fixed;
}
&:nth-child(4) {
background: url("@/assets/img/fbh.jpg") no-repeat center;
background-size: cover;
background-attachment: fixed;
}
&:nth-child(5) {
height: 179px; //这里专门设置一下这个高度，其他的都是100vh的！效果会更好，有一个中间的变化！
background: url("@/assets/img/history_3.png") no-repeat center;
background-size: auto;
background-attachment: fixed;
}
&:nth-child(6) {
background: url("@/assets/img/summer.jpg") no-repeat center;
background-size: cover;
background-attachment: fixed;
}
}
}
}这个效果实现出来非常华丽，可以让下面出来的图片覆盖上面！
3.min-height不要乱用
有时候设置了min-height：80%
这样在缩放浏览器的时候 div 会不被限制地放大缩小，会冲破外围，不受外围的固定高度限制
而设置为height：80%，那么这个 div会始终包裹在外围的里面，为它的 80%！
4.git 提交规范
约定的提交格式如下：
<提交类型>[(影响范围)]: <本次提交描述> <(禅道号或 bug 号)>注: []中的内容表示可选，<>中的内容表示必填
提交类型主要包含如下几种：
| 类别 | 含义 |
|---|---|
| feat | 新功能 |
| fix | 修复 bug |
| merge | 合并代码 |
| ui | 样式调整 |
| refactor | 重构（既不修复错误也不添加功能） |
| perf | 优化相关，比如提升性能、体验 |
示例
在提交类型之后，可以选择性地添加本次提交的影响范围（可选的），可以简单的用文字描述范围信息，如下示例：
fix(全局): 修改全局的代码加载方式 (bug#1234)
perf(基金金融大全): 修改大全表格渲染效率 (story#4555)
feat: 添加xxx新功能 (story#2356)
提交描述
在提交描述部分请填写具体的改动描述，类似于如下的这些描述，不要出现在代码提交中。
fix bug 修复一些问题 添加一些功能 … 这些描述中无法看到本次提交具体解决了什么问题，所以要避免。
禅道号
禅道号或 bug 号：
每一个提交都应该有禅道号，可以为 bug 号，也可以为需求号，但是不要写任务号。
一个任务如何去看需求号？
打开任务详情，在基本信息卡片中有一个相关需求的链接，点击打开。
在打开后的弹窗中，左上角即为需求号。
5."TypeError: Object(...) is not a function”
这种错误不太好处理，但是大多数是命名错误，或者引入错误
timeFormatFilter这种长的驼峰，不要写为timeFormatfilter，错写了大小写
import { timeFormatFilter } from "@/util/util.js";
methods: {
timeFormatFilter(date) {
return timeFormatFilter(date);
},
},报了这个错TypeError: Object(...) is not a function，比较好的排查方法是打印一下函数，看看到底是不是函数
6.react antd 按需加载 报错.bezierEasingMixin()
修改 less 版本:
yarn add less@^2.7.3
"less": "^2.7.3",
"less-loader": "^5.0.0",
"react": "^17.0.1",javascriptEnabled: true也必须要配置
后续
发现 antd@4版本需要 less 在 3.7.0以上，否则报错找不到 each 函数，所以最终"less": "^3.7.0”
"less": "^3.7.0",
"less-loader": "^5.0.0",7.让 div 中的所有小 div 分摊宽度均匀布局
表格中可以这样应用，或者构建列表
<ul>
<li>中南民族大学</li>
<li>中南民族大学附属中学</li>
<li>中南民族大学管理学院大数据实验班</li>
<li>中南民族大学教务处</li>
<li>中南民族大学保卫处</li>
<li>中南民族大学图书馆</li>
<li>武汉市江汉区江汉路地铁站</li>
</ul>body {
margin: 0;
}
ul {
width: 100%;
height: 30px;
/* 行高属性可以传递给 li*/
line-height: 30px;
list-style-type: none;
display: flex;
border: 1px #e8604c solid;
box-sizing: border-box;
padding: 0;
margin: 0;
}
ul li {
flex: 1;
text-align: center;
/*下面三个属性设置溢出显示三个点*/
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
/*上面三个属性设置溢出显示三个点*/
padding: 0 10px;
border: 1px #e8604c solid;
box-sizing: border-box;
}这样就可以让 li 各占四分之一的宽度，而不用使用百分比布局了！
并且元素是不会超出宽度的，这样的宽度就是一个固定的宽度！
效果：
8.dl-dt-dd构建垂直列表，代替 ul-li的方案
实现了垂直方向上的列表布局，比 ul-li 实现更加方便实现里面内容的样式（ul-li里面要写两个 div，看起来结构没有那么清晰），并且不会有无序列表的那个小点
适合的场景：li 里面的内容相对比较复杂
<div class="container">
<dl>
<dt>中南民族大学管理学院大数据实验班</dt>
<dd>123131212213</dd>
</dl>
<dl>
<dt>中南民族大学附属中学</dt>
<dd>2322222</dd>
</dl>
<dl>
<dt>武汉市江汉区江汉路地铁站</dt>
<dd>3212121122</dd>
</dl>
</div>.container {
width: 50%;
margin: 30px auto;
border: 1px gray solid;
}
dl {
height: 50px;
border-bottom: 1px solid gray;
margin: 0;
}
dl dt {
font-size: 20px;
margin: 0;
}
dl dd {
font-size: 12px;
color: gray;
margin: 0;
}效果：
或者修改一下 css，可以实现横向的布局：
.container {
width: 70%;
margin: 30px auto;
border: 1px gray solid;
display: flex;
}