Ionic4 learning notes 9 -- an east project 01

1、 overall situation CSS(src/global.scss At the bottom of )

/* overall situation css style */
	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、 Common icon libraries are recommended

https://ionicons.com

https://www.iconfont.cn/

lookup 、 Download the corresponding icon , Put in src/assets Under the table of contents .

Here you can download the icon of scanning code and message , When downloading, the size is set to 32px;

3、 stay tab1 Modify in page

<ion-toolbar>
    <ion-buttons slot="start">
      <img src="/assets/qrcode.png" />
   </ion-buttons>
 
    <ion-searchbar placeholder=" Please enter keywords " 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>

add to CSS Modify the position between the message icon and the number of messages

Compiled as follows ：

CSS as follows

.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;   Dynamic width 
  
      li{
  
        width: 8rem;
        height:10rem;
        float: left;
        margin-left: 1rem;
  
        img{
  
          width: 7rem;
          height: 7rem;
        }
  
        p{
          padding: .4rem;
          text-align: center;
        }
  
  
      }
    }
  
  
  
  
  }