@import url(//at.alicdn.com/t/c/font_4992197_ya11wm1vrhf.css);

 :root {
   --main-color: #f05036;
   --p-m-g: 10px;
   --footer-h: 60px;
 }

 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: Arial, Helvetica, 'MSYH', '微软雅黑', sans-serif;
 }

 a {
   text-decoration: none;
   font: inherit;
   color: inherit;
 }

 input[type='text'],
 button {
   border: none;
   outline: none;
   font: inherit;
   color: inherit;
   background-color: transparent;
 }

 img {
   display: block;
   max-width: 100%;
 }

 .iconfont {
   font-size: 24px;
 }

 body {
   background-color: #f1f2f3;
 }

 header {
   padding: var(--p-m-g);
   margin: var(--p-m-g);
   border-radius: var(--p-m-g);
   background-color: #fff;
 }

 .nav {
   display: flex;
   align-items: center;
   gap: var(--p-m-g);
 }

 .nav .logo {
   width: 45px;
   height: 45px;
 }

 .nav .info {
   color: var(--main-color);
   margin-right: auto;
   font-size: 12px;
 }

 .nav .info h1 {
   font-size: 16px;
   color: #000;
 }

 .nav .info .iconfont {
   font-size: 12px;
 }

 .nav>.iconfont {
   font-size: 16px;
   align-self: flex-start;
 }

 .nav nav {
   display: flex;
   gap: var(--p-m-g);
 }

 .nav nav a {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   margin: 0 2px;
 }

 .banner {
   height: 60px;
   background-color: var(--main-color);
   border-radius: var(--p-m-g);
   margin-top: calc(2*var(--p-m-g));
 }

 .query-wrap {
   position: sticky;
   top: 0;
   background-color: #fff;
   padding: var(--p-m-g);
   z-index: 1;
 }

 .query {
   border-radius: 20px;
   height: 40px;
   background-color: #f1f2f3;
   display: flex;
   align-items: center;
   padding: 0 var(--p-m-g);
   gap: var(--p-m-g);
 }

 section {
   background-color: #fff;
   display: flex;
 }

 aside {
   position: sticky;
   left: 0;
   top: 60px;
   display: flex;
   flex-direction: column;
   gap: var(--p-m-g);
   width: 30%;
   height: fit-content;
   text-align: center;
   padding: var(--p-m-g);
   background-color: #f1f2f3;
 }

 aside a {
   line-height: 2;
 }

 main {
   width: 70%;
 }

 .item {
   position: relative;
   display: grid;
   grid-template-columns: 80px 1fr;
   gap: var(--p-m-g);
   padding: var(--p-m-g);
   background-color: #fff;
   margin-bottom: var(--p-m-g);
 }

 .item .info {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 }

 .item .add {
   position: absolute;
   right: var(--p-m-g);
   bottom: var(--p-m-g);
 }

 .spacer {
   line-height: 2;
   padding-bottom: var(--footer-h);
   text-align: center;
   font-size: 14px;
 }

 footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   z-index: 99;
   background-color: #fff;
 }

 footer {
   display: grid;
   grid-template-columns: auto 1fr auto;
   align-items: center;
   gap: var(--p-m-g);
   height: var(--footer-h);
   padding: 0 var(--p-m-g);
 }

 footer .iconfont {
   font-size: 40px;
   color: var(--main-color);
 }

 footer p {
   font-weight: 600;
   font-size: 18px;
 }

 footer button {
   height: 40px;
   width: 100px;
   border-radius: 20px;
   background-color: var(--main-color);
   color: #fff;
   font-size: 18px;
 }