如何调整Ionic界面代码样式以匹配目标参考设计效果图

你可以直接替换下方的模板代码，再把样式代码添加到对应组件的scss样式文件中，即可实现和参考图一致的效果：

调整后的模板代码 #

<ion-content class="game-content">
  <ion-grid class="game-grid">
    <!-- 卡牌区域 -->
    <ion-row class="card-row ion-text-center">
      <ion-col *ngFor="let c of images; let i = index" class="card-col">
        <img 
          src="../assets/cards/cardBackground/cardBackground.png" 
          *ngIf="!c.isFlipped" 
          (click)="selectCard(c)"
          class="card-img"
        />
        <img 
          [src]="imageDir + c.name + '.png'" 
          *ngIf="c.isFlipped && !c.isMatched"  
          (click)="selectCard(c)"
          class="card-img"
        />
      </ion-col>
    </ion-row>

    <!-- 玩家信息区域 -->
    <ion-row class="player-row ion-text-center" >
      <ion-col>
        <ion-card class="card-class">
          <img src="../assets/playIcons/player1.svg" class="player-avatar"/>
          <ion-card-header>
            <ion-card-title>{{this.player1["name"]}}</ion-card-title>
            <ion-card-subtitle>Score: {{this.player1["score"]}}</ion-card-subtitle>
          </ion-card-header>
        </ion-card>
      </ion-col>

      <ion-col>
        <ion-card class="card-class">
          <img src="../assets/playIcons/player2.svg" class="player-avatar"/>
          <ion-card-header>
            <ion-card-title>{{this.player2["name"]}}</ion-card-title>
            <ion-card-subtitle>Score: {{this.player2["score"]}}</ion-card-subtitle>
          </ion-card-header>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

对应添加的样式代码 #

.game-content {
  --padding-start: 8px;
  --padding-end: 8px;
  --padding-top: 8px;
  --padding-bottom: 8px;
  height: 100vh;
}

.game-grid {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card-row {
  flex: 1;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  gap: 6px;
}

.card-col {
  width: auto;
  flex: unset;
}

.card-img {
  width: 42px;
  height: 60px;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: transform 0.1s ease;
  &:active {
    transform: scale(0.95);
  }
}

.player-row {
  flex-shrink: 0;
  gap: 12px;
}

.card-class {
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 8px;
  .player-avatar {
    width: 40px;
    height: 40px;
  }
  ion-card-header {
    padding: 0 0 0 12px;
    ion-card-title {
      font-size: 16px;
      margin-bottom: 2px;
    }
    ion-card-subtitle {
      font-size: 14px;
      color: #666;
    }
  }
}

核心调整说明 #

• 修复了原代码卡牌列宽设置不合理的问题，改为自动适配宽度，配合自动换行、居中对齐配置，卡牌会整齐排列在上方区域
• 给卡牌添加了固定尺寸、圆角、阴影和点击反馈，和参考图的卡牌视觉效果对齐
• 调整了整体布局的高度分配，卡牌区域占大部分可视空间，玩家信息区域固定在底部，不会出现布局挤压错乱的问题
• 优化了玩家卡片的布局，改为横向排列头像和信息，缩小了元素尺寸，和参考图的玩家卡片样式匹配

内容的提问来源于stack exchange，提问作者Grant Solomons