实习手计（4）：月末碎碎念！

好啊，这么快就过去一个月咯。这周还蛮有趣的。很适应现在的上班状态了，遇到的人都蛮好的，也没怎么加过班~上班也不用怎么和别人打交道，反正挺好的啊！好评

一、改了又改的需求

这里我就要吐槽一下了（用图片多好哇）。因为要做pc和移动以及中英文的，所以每次改都比较繁琐，还改了改了n次。

（1）第一次贴的图片

（2）第二次讲不能贴文字，需要文字可以复制，好好好，继续改（为此还加班了一会，师父还帮我改了好多，谢谢~热心帅气的师父）

（3）第三次，字体，按钮，颜色，间距，图片也不对（我是应该怪自己眼拙没看出来呜呜，催的也蛮急的，改的也很狼狈）

（4）第n次.....（终于好了）

二、技巧

（1）组件

pc和移动的样式还是有蛮大的不同的，所以可以分为两个组件来写，避免混乱。

<template>
        <Mobile v-if="isMobile" />
        <Pc/>
</template>

<script lang="ts" setup>
    import { matchMobile } from '~~/composables/useMatchRules.ts';
    import { ref, onMounted } from 'vue';
    const isMobile = ref(false);
    onMounted(() => {
        isMobile.value = matchMobile();
    });
</script>

（2）布局flex

flex布局

这，记得很详细，就先不写了（.......）

（3）深度选择器

定义、作用：

• :deep()是一个伪类，它可以使处在scoped样式中的选择器影响到子组件。

使用：

• 父组件

<template>
  <div class="page">
    <div class="father-box">我是父组件</div>
    <VueCSSDeepSon></VueCSSDeepSon>
  </div>
</template>

  <script setup lang="ts">
  import VueCSSDeepSon from './VueCSSDeepSon.vue'
</script>

  <style scoped>
  .page .father-box{
  color: black;
  }
  .page:deep(.son-box) {
  color: red;
  }
  .page .son-box {
  background-color: green;
  }
</style>

• 子组件：

<template>
  <div>
    <div class="son-box">我是子组件</div>
  </div>
</template>

  <script setup lang="ts">
</script>

  <style scoped>
  .son-box {
  color: yellow;
  }
</style>

三、写在最后

• 本周裁员了？前端竟然裁了俩，无情的公司
• 本周好像也就改了这一个需求，不过这周开会又讲首页改成动画的了，下周就要改吧
• 这周，依旧宅，不想出门，我饭搭子还去加班了呜呜，状态有点不对劲？下周该出去走走了......
• 在吐槽这个租的房子，好贵的水电？！突然给我断电了.......
• 浅浅总结一下这个月，菜鸟1.0进阶中，收获饭搭子，有个好师父.......期待下个月
• 啊新的一天。