一、git
1. git push之前忘记git pull:需要指定如何协调不同的分支。
解决：
(1) git config pull.rebase false
(2) git status 用于查看在你上次提交之后是否有对文件进行再次修改
(3) git stash 将当前的工作状态保存到git栈
2. 删除本地分支
# 删除本地分支 git branch -d
# 强行删除本地分支 git branch -D
3. 创建新分支并推送到远程仓库
在当前
main分支上创建自己新的分支AddF01，并切换到该分支下git checkout -b AddF01在
AddF01分支上进行开发，测试，待功能完成之后，进行合并提交到main分支上：git checkout main
git pull origin main
git merge AddF01
git push origin main
二、动画
1. wowInit
import { wowInit } from ...
mounted() {
wowInit()
}
wow fadeInUp data-wow-delay='.5s'2. 当目标元素滑动到可视区域tab切换
当目标元素滑动到可视区域视频播放文字消失
HTMLElement.offsetParent 返回一个指向最近的（指包含层级上的最近）包含该元素的定 位元素
HTMLElement.offsetWidth 返回一个元素的布局宽度
HTMLElement.offsetHeight 返回该元素的像素高度
HTMLElement.offsetTop 返回当前元素相对于其 offsetParent 元素的顶部内边距的距离
HTMLElement.offsetLeft 返回当前元素左上角相对于 HTMLElement.offsetParent 节点的左 边界偏移的像素值
Element.scrollTop 一个元素的 scrollTop 值是这个元素的内容顶部（卷起来的）到它的视口 可见内容（的顶部）的距离的度量
mounted() {
this.handleScroll()
window.addEventListener('scroll', this.handleScroll, true)
}
methods() {
当目标元素滑动到可视区域tab切换
handleScrollTab(triggerElement) {
const scrollTop = document.documentElement.scrollTop ||
document.body.scrollTop;
const triggerElementOffsetHeigth =
document.querySelector(triggerElement).offsetHeight;
const triggerElementOffsetTop =
document.querySelector(triggerElement).offsetTop;
if (scrollTop > triggerElementOffsetTop - 55 && scrollTop <
triggerElementOffsetHeigth + triggerElementOffsetTop - 55 ) {
return true
}
},
当目标元素滑动到可视区域视频播放文字消失
handleScrollVideo(triggerElement, videoElement, contentElement) {
const scrollTop = document.documentElement.scrollTop ||
document.body.scrollTop;
const triggerElementOffsetHeigth =
document.querySelector(triggerElement).offsetHeight;
const triggerElementOffsetTop =
document.querySelector(triggerElement).offsetTop;
if (scrollTop > triggerElementOffsetTop - 55 && scrollTop <
triggerElementOffsetHeigth + triggerElementOffsetTop - 55 ) {
return true
}
},
handleScroll () {
if (this.handleScrollTab('.floor3-item-box')) {
const floor3OffsetTop = document.querySelector('.floor3_nav').offsetTop
this.scrollMove = -(scrollTop -80 - floor3OffsetTop)
if (this.scrollMove < -(this.floor3ItemHeight *
(this.tab1Data.tab1Content.length - 1))) {
this.scrollMove = -(this.floor3ItemHeight *
(this.tab1Data.tab1Content.length - 1))
}
if (this.scrollMove > 0) {
this.scrollMove = 0
}
document.querySelector('.floor3-tab-box').style.transform =
`translate3d(${this.scrollMove}px, 0px, 0px)`
}
if (this.handleScrollVideo('.floor7-video-box','.floor7-popup-
video','.floor7-title-effect')) {
const floor7OffsetTop = document.querySelector('.floor7-video-
box').offsetTop
const floor7OffsetHeight = document.querySelector('.floor7-video-
box').offsetHeight;
this.scrollMove = (scrollTop - 80 - floor7OffsetTop)
this.scrollSpeed = (0.4 / floor7OffsetHeight) * this.scrollMove * 3
if (this.scrollSpeed < 0) {
this.scrollSpeed = 0
}
if (this.scrollSpeed > 0.4) {
this.scrollSpeed = 0.4
}
document.querySelector('.floor7-popup-video').style.transform =
`scale(${0.6+this.scrollSpeed})`
}
}
}三、tab切换
<section class="floor3-wrap">
<div class="pc-tab-content">
<div class="tab-content-box">
<p class="tab-content-title" v-for="(item,index) in
tab1Data.tab1Title"
:class="index == isTabOne ? 'tabTwo-title-active':''"
:key="index"
@mouseenter="tabOneHandle(index)" >
{{item.title}}</p>
</div>
<div class="floor3-img">
<PcProductImage v-for="(item,index) in tab1Data.tab1Img"
class="pc-content-img"
:class="index == isTabOne ? 'pc-tabTwo-active':''"
:productImg="item.pcImg"
:key="'tabTwo'+index"></PcProductImage>
</div>
<div class="floor3-content">
<div class="floor3-item-content"
v-for="(item,index) in tab1Data.tab1Content"
:class="index == isTabOne ? 'tabTwo-content-active':''"
:key="index">
<div class="floor3-title" v-html="item.title"></div>
<div class="floor3-topic" v-html="item.topic"></div>
<div class="floor3-effect" v-html="item.effect"></div>
</div>
</div>
</div>
</section>
data() {
tab1Data: {}
}
methods: {
tabOneHandle (index) {
this.isTabOne = index
}
}四、反引号``
（1）可以换行
（2）可以格式化字符串--->${}
五、getBoundingClientRect().top 元素上边到视窗上边的距离
methods: {
handleScroll (e) {
const topContentTop = document.querySelector('.floor8-content-
pos').getBoundingClientRect().top
const topBgDom = document.querySelector('.floor8-content-pos')
topBgDom.style.opacity = 1
if (topContentTop <= 0) {
topBgDom.style.opacity = 0
}else{
topBgDom.style.opacity = 1
}
},
},
mounted() {
window.addEventListener('scroll', this.handleScroll, true)
}六、图片 文字
文字 图片
图片 文字
:style="{
justifyContent: (index + 1) % 2 === 0 ? 'flex-start' : 'flex-end',
textAlign: (index + 1) % 2 === 0 ? 'right' : 'left'
}"
import type { PropType } from 'vue'
import type { IBoxs } from '@/api/types'
const props = defineProps({
boxsData: {
type: Object as PropType<IBoxs[]>,
default: () => {}
}
})
<div
class="box"
v-for="(value, index) in props.boxsData"
:key="index"
:style="{
marginTop: (index + 1) % 2 === 0 ? '100px' : '0',
marginBottom: (index + 1) % 2 === 0 ? '100px' : '0'
}"
>
<div
class="abs-img"
:style="{
justifyContent:
(Number(index) + 1) % 2 === 0 ? 'flex-end' : 'flex-start'
}"
>
<img :src="value.pcImg" alt="" />
</div>
<div
class="abs-text"
:style="{
justifyContent: (index + 1) % 2 === 0 ? 'flex-start' : 'flex-end',
textAlign: (index + 1) % 2 === 0 ? 'right' : 'left'
}"
>
<div class="text"></div>
</div>
</div>
