ionic4学习笔记9--某东项目01

1、全局CSS(src/global.scss的最下面)

/*全局css样式*/
	body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	  margin: 0;
	  padding: 0;
	}

	html{
	  font-size: 62.5%;
	}
	.clearfix{

	  &::after{
	    display: block;
	    content: "";
	    height: 0px;
	    clear: both;
	  }
	}

2、常用图标库推荐

https://ionicons.com

https://www.iconfont.cn/

查找、下载相应图标，放入到src/assets目录下。

这里下载了扫码和消息的图标，下载时大小设置为32px;

3、在tab1页面中修改

<ion-toolbar>
    <ion-buttons slot="start">
      <img src="/assets/qrcode.png" />
   </ion-buttons>
 
    <ion-searchbar placeholder="请输入关键词" animated></ion-searchbar>

   <ion-buttons slot="end" class="message">
       <img src="/assets/message.png" />

       <ion-badge color="danger" class="badge">8</ion-badge>
    </ion-buttons>
  </ion-toolbar>

添加CSS修改消息图标和消息数目间的位置

编译后如下所所示：

CSS如下

.message{

    position: relative;
    .badge{
      position: absolute;
      right: -4px;
      top:-4px;
      font-size: 1rem;
    }
  }
  
  ion-slide{
    width: 100%;
    height: 150px;
    overflow: hidden;
    img{
      max-width: 100%;
    }
  }
  
  
  
  .h_title{
    padding: 1rem .5rem;
    font-size: 1.4rem;
    &::before{
      display: inline-block;
      border-left: 3px solid #f53d3d;
      height: 14px;
      width: 1px;
      content: "";
      top: 2px;
      position: relative;
    }
  }
  
  
  .hotlist{
    width: 100%;
    height: 10rem;
  
    overflow-x: auto;
    overflow-y: hidden;
  
    ul{
  
      // width: 120rem;  动态宽度
  
      li{
  
        width: 8rem;
        height:10rem;
        float: left;
        margin-left: 1rem;
  
        img{
  
          width: 7rem;
          height: 7rem;
        }
  
        p{
          padding: .4rem;
          text-align: center;
        }
  
  
      }
    }
  
  
  
  
  }