实习手记（2）：前端菜鸟的摸鱼与成长

在不断的学习（摸鱼）和实践中，第二周也快要结束了，这周总体来说还是蛮不错的比上周好很多（没有那么拘谨？）。前面两天一直在学习和摸鱼之后就修改了几个需求。这里记录一下学习到的新知识、小技巧、小细节，顺便再发表一下自己的小感想～

一、摸鱼与学习

摸鱼&感想

完善并提交上周需求修改：上周修没有修改移动端的（缺乏实际经验之前也没写过移动端的），还是Q哥帮忙修改的（不得不表扬一下）。然后让我提交，好吧我竟然还不太熟悉。

看知识框架&面试题：这个就不多说了，改需求的就是给公司干的，学习是自己得到的（嗯有道理）。

学习新知识与回顾：其实看这些我记不住太多，反正知道怎么去改组件的一些样式还有怎么使用就好了。

收获

规范修改提交流程：记得安装一下git插件。add--》commit 「提交的修改信息要规范：例如更新feat（编号）：修改的内容」--》git push--》在jenkins上选择对应的项目--》点击build now等待构建完毕。
移动端修改：通过v-if="ifMatched"和@media 关键字当当视口宽度小于或等于某一特定值时，媒体查询内的样式会被应用，以适应移动端。例如：

@screen-mobile-width: 768px; // 设定移动端的断点宽度

@media (max-width: @screen-mobile-width) {//要修改的样式}

二、实践中成长

实践

（1）修改官网弹框遮罩层背景颜色：就是之前的弹框遮罩层颜色太黑了改了个颜色。

这里要注意哪里用到了弹框AModal哪里就要修改，不要漏了。

知识点小记**:deep**是一个深度选择器，接下来的样式会穿透scoped的限制，去影响到子组件的元素。

:deep(.ant-modal-mask) {
background-color: rgba(102, 102, 102, 0.4);
}//这里其实不用deep也可以

复制代码

// deep的使用
// 这里子组件的:deep会穿透scoped边界，并向下查找所有匹配.my-custom-class的选择器，包括子组件内部的元素，所以就影响到了子组件内部的inner element。
//ParentComponent.vue
<template>
  <ChildComponent class="my-custom-class" />
</template>

<style scoped>
  .my-custom-class {
    color: red;
  }

  :deep(.my-custom-class) {
    color: blue;
  }
</style>

    
//ChildComponent.vue
<template>
  <div class="inner-element">I'm in the child component</div>
</template>

<style scoped>
  .inner-element {
  /* blue */
}

**（2）表单项样式修改：**修改了一个模特上传表单的样式。

由于这里只需要给文字换一下样式，就使用了一个插槽把文字拿出来单独设置一个class，然后去修改样式。

（3）首页banner修改：修改背景视频、文字和按钮的层级样式，以及添加蒙层。

知识点小记1：使用v-html="t('global_home_text')"， v-html则将数据作为HTML代码解析并渲染，所以不使用v-html识别不出来br换行。
知识点小记2：绝对定位会脱离文档流，要给父容器添加position:relative，让子容器相对于父容器进行定位（子绝父相），不脱离文档流。需要更多了解的是BFC。这里先不写了后续写了再更新。
知识点小记3：设置不同的层级可以使用z-index，但只对具有定位（position）的元素生效。

Div 1

Div 2

Div 3
知识点小计4：需要判断移动端和中英文，显示相应的四个不同图片。有两个方法，一种是使用双重三元运算符，另一种是使用映射表。

实习手记（2）：前端菜鸟的摸鱼与成长

一、摸鱼与学习

摸鱼&感想

收获

二、实践中成长

实践

坑点

技巧

三、写在最后