一张可爱的名片 ｜ 「青训营 X 码上掘金」主题创作

当青训营遇上码上掘金。

主题 1：我的名片

名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。请大家围绕“我的名片”这个主题进行代码创作。

介绍

最近报名了字节青训营，看到有个主题创作活动“我的名片”挺有意思的，正好复习下最近学的 React 和 Less。名片整体采用比较可爱的设计风格，使用了 React + TypeScript + Less来编写，同时也做了移动端适配。

思路

• TypeScript 逻辑很简单，因为数据基本都没写死，所以使用它来遍历数组。同时也给一些数据编写了相应类型。

• Less 基本就是 flex 布局，整体分为左右两侧，左侧指定 width，右侧用 flex: 1即可。也把一些变量也都提了出来，方便复用。同时也封装了一些函数，方便媒体查询来适配移动端。

简要实现

这里就说下关键代码，详细看末尾码上掘金链接即可。

React 部分

const App = function () {
return (
  // 卡片 Layout
  <ContainerCard>
    {/* 左侧 */}
    <CardProfile />
    {/* //右侧 */}
    <CardDetail />
  </ContainerCard>
)
}

Less 部分

// 基本上就是 flex 梭哈
.main {
  .media({
    height: auto
  },phone);
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  &_container {
    width: 55em;
    height: 32em;
    .media({
      height: auto;
      flex-direction: column;
      border-radius: 0em;
      box-shadow: none;
      padding: 1em 0
    },phone);
    border-radius: 1em;
    background-color: white;
    box-shadow: @card-shadow;
    display: flex;
    flex-direction: row;
  }

  .media({
    &::after {
      inset: 0;
      z-index: -1;
      content: '';
      position: fixed;
      background: url(@background-url) center/cover;
    }
  },desktop);
}

码上掘金