Ionic 5：离子卡的造型答案

【问题标题】：Ionic 5: styling of ionic cardIonic 5：离子卡的造型
【发布时间】：2020-09-28 07:06:42
【问题描述】：

我目前正在寻找一种解决方案，将我的离子卡设置为look like this。一直在玩我的 z-index 和代码的其他部分，但仍然得到this。以下是我的 HTML 和 scss 代码。

favourites.page.html

<ion-content class="ion-padding">
  <ion-row>
    <ion-col>
      <ion-card class="favCard" *ngFor="let item of fav; let i = index">
        <img (click)="direct(item.name)" src="{{ item.photo }}">
        <div expand="block" class="info">
          <h2 class="name">{{ item.name }}</h2>
          <h3 class="cuisine">{{ item.cuisine || item.type }} </h3>
          <ion-button class="delete" (click)="delete(item.name)">Delete</ion-button>
        </div>
      </ion-card>

    </ion-col>
  </ion-row>

</ion-content>

favourites.page.scss

ion-card img {
    display: block;
    width: 100%;
    height: 100% !important;
}
.delete{
    margin-left: 45px;
    margin-top: 10px; 
}
.info{
    border-radius: 50px;
    margin-top: -6%;
    z-index: 3;
    position: absolute;
    padding: 10px 20px;
    margin-left: 50px;
    width: 220px;
    background-color: white;
    box-shadow: 0 3px 3px rgba(0,0,0,0.19);
}
.favCard {
    width: 320px;
    height: 230px;
    border-radius: 10px;
    box-shadow: 0 3px 3px rgba(0,0,0,0.19);
    margin: auto;
    margin-top: 60px;
    margin-bottom: 60px;
}
.name{
    margin-top: 0px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    font-family: Garamond;
    color:#ffc409;
    text-transform: uppercase;
}
.cuisine{
    margin-top: 0px;
    color:#4F5153;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    font-family: Garamond;
}

非常感谢您的帮助。

【问题讨论】：

我现在正在使用移动设备，所以无法给出解决方案，但试试这个tutorialrepublic.com/faq/… 盒子是卡片，堆叠顶部是卡片上堆叠的盒子。
我确实找到了方法

标签： html ionic-framework sass

【解决方案1】：

favourites.page.html

<ion-content class="ion-padding">
  <div id="header">
    <h1 class="welcome">Favourite</h1>
    <p class="appname">List</p>
  </div>
  <ion-row>
    <ion-col>
      <ion-card class="favCard" *ngFor="let item of fav; let i = index">
          <img (click)="direct(item.name)" src="{{ item.photo }}">
          <ion-card-content expand="block" class="info">
            <h2 class="name">{{ item.name }}</h2>
            <h3 class="cuisine">{{ item.cuisine || item.type }} </h3>
            <ion-button class="delete" (click)="delete(item.name)">Delete</ion-button>
          </ion-card-content>


      </ion-card>

    </ion-col>
  </ion-row>

</ion-content>

favourites.page.scss

ion-card img {
    border-radius: 10px;
    display: block;
    width: 100%;
    height: 100% !important;
}
.delete{
    margin-left: 45px;
    margin-top: 10px; 
}
.favCard{
    width: 320px;
    height: 230px;
    border-radius: 10px;
    box-shadow: -1px 3px 5px 0px rgba(0,0,0,0.75);
    margin: auto;
    margin-top: 30px;
    margin-bottom: 90px;
    overflow: visible;
}
.info{
    z-index: 9;
    border-radius: 50px;
    -webkit-box-shadow: -1px 10px 5px 0px rgba(0,0,0,0.75);
    box-shadow: -1px 10px 5px 0px rgba(0,0,0,0.75);
    margin-top: -12%;
    z-index: 3;
    position: absolute;
    margin-left: 50px;
    width: 220px;
    background-color: white;
}

盒子阴影可以从https://www.cssmatic.com/找到。

【讨论】：