<template>
  <div class="custom-header">
    <img class="new-header" src="/static/imgs/new-header.png" />

    <view class="card">
      <view class="card-main">
        <img class="card-title" src="/static/imgs/card-title.png" />

        <view class="card-tags">
          <view class="card-tag">修饰五五分身、腿材</view>
          <view class="card-tag">修饰五五分身、腿材</view>
        </view>
      </view>
    </view>
  </div>
</template>

<style scoped lang="scss">
  .custom-header {
    .new-header {
      width: 100%;
      height: auto;
      display: block;
    }

    .card {
      background: rgba(239, 229, 219, 1);
      padding: 50rpx;

      .card-main {
        width: 100%;
        margin: 0 auto;
        height: 800rpx;
        background: #fff;
        display: block;
        border-radius: 20rpx;
        .card-title {
          width: 450rpx;
          display: block;
          margin: 0 auto;
          margin-top: 9rpx;
        }

        .card-tags {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-wrap: wrap;

          .card-tag {
            height: 64rpx;
            padding-left: 26rpx;
            padding-right: 26rpx;
            background: rgba(239, 229, 219, 1);
            color: rgba(78, 78, 78, 1);
            font-size: 16rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 16rpx;
            margin-right: 20rpx;
          }
        }
      }
    }
  }
</style>
