影人页

介绍

影人页面与角色页面差不多，相比影视页面，内容少了很多，影人页面有的功能，影视大多也有。以下只说几个不同点

目录结构

└─ src                          
   └─ views                
      └─ actor                          # 影人
         ├─ award                       # 获奖详情
         ├─ role                        # 饰演角色
         ├─ works                       # 参演作品
         └─ detail                      # 详情
            ├─ components               # 组件
            │  ├─ ActorAward            # 获奖统计
            │  ├─ ActorCount            # 数据统计
            │  └─ Skeleton              # 骨架屏
            ├─ index.vue                # 影人详情入口页
            └─ information.vue          # 详情子页面

影人封面

由于影人列表中的图片为小图，清晰度不高，在详情页直接使用会显得模糊，所以将小图作为背景，在上层再覆盖一个大图，当进入详情页时，小图封面先展示，当大图加载完时，会覆盖在小图上，是一个优化点。

<!-- 小图 -->
<div class="actor-avatar" :style="bgImage"></div>
<!-- 大图，覆盖在小图上方 -->
<div class="actor-avatar actor-avatar-larger" :style="bgImageLarger"></div>

computed: {
  // 小图背景
  bgImage() {
    return `background-image:url('${this.actor.avatar}')`;
  },
  // 大图背景
  bgImageLarger() {
    return `background-image:url('${this.actor.avatar?.replace(/public/, "larger")}')`;
  },
},

.actor-avatar {
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 20%;
}
/* 大图绝对定位到小图上方 */
.actor-avatar-larger {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 460px;
}