项目样式效果（图片设置宽高相同且不压缩，鼠标悬停放大阴影，v-if的过渡动画，切换页面中英文，Metainfo插件设置页面标题等meta信息，flex两端对齐最后一行左对齐）

1.图片宽100%，设置图片为正方形

给图片外面再套层div

.image{
position: relative;
width: 100%;
height: 0;
padding-top: 100%; //调整图片比例
margin-bottom: 5%;
}
.image img{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}

2.鼠标悬停图片加阴影放大动画效果

效果网站：12种鼠标悬停网站图片展示方式 - 图片特效 - 站长图库

鼠标悬停放大图片特效_北辰Beichen的博客-CSDN博客_悬停放大

放大：

overflow:hidden;（外部容器超出部分隐藏）

transition: 0.3s linear;（图片自身设置过渡属性）

transform:scale(1.1);（鼠标悬停放大）

阴影：

灰度过滤属性

img {

-webkit-filter: grayscale(100%);

filter: grayscale(100%);

}

img:hover{

-webkit-filter: grayscale(100%);

filter: grayscale(100%);

}

3.v-if显示下拉框添加过渡动画效果（transition标签）

vue中transition实现过渡动画效果_敲起来blingbling的博客-CSDN博客_vue的transition过渡动画

4.一键切换中英文（国际化开发ui / 发请求覆盖）

vue-element-admin添加国际化（切换中英文）_EvaY_Yang的博客-CSDN博客_element中英文切换

5. MetaInfo插件设置meta信息（页面标题等相关的设置）

vue插件MetaInfo的使用_周不凢的博客-CSDN博客_metainfo

6.图片防止压缩变形

object-fit:cover;

【实例】深入详解 CSS 中的 object-fit 5个属性值 - html技术_卡卡网

7.flex布局两端对齐，最后一行左对齐

flex布局 两端对齐 最后一行左对齐_七九-的博客-CSDN博客_两端对齐最后一行

给容器元素的after或者before伪类添加：

.img:after{

        display:block;

        content:";

        width:32%;

        height:0;

}