好啊，这么快就过去一个月咯。这周还蛮有趣的。很适应现在的上班状态了，遇到的人都蛮好的，也没怎么加过班~上班也不用怎么和别人打交道，反正挺好的啊！好评
一、改了又改的需求
这里我就要吐槽一下了（用图片多好哇）。因为要做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
这，记得很详细，就先不写了（.......）
（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进阶中，收获饭搭子，有个好师父.......期待下个月
- 啊新的一天。
