代码

 44px;

    height:   44px;

    background:   rgba(255,   255,   255,   0.1);

    border-radius:   50%;

    display:   flex;

    align-items:   center;

    justify-content:   center;

    color:   white;

    font-size:   20px;

    cursor:   pointer;

    transition:   all   0.2s   ease;

    }

    .close-viewer:hover   {

    background:   rgba(255,   255,   255,   0.2);

    transform:   scale(1.1);

    }

    .app-title   {

    font-size:   1.25rem;

    font-weight:   700;

    }

    .product-grid   {

    display:   grid;

    grid-template-columns:   repeat(3,   1fr);

    gap:   12px;

    margin-top:   12px;

    }

    .product-item   {

    text-align:   center;

    }

    .product-icon   {

    height:   80px;

    background:   f8f8f8;

    border-radius:   12px;

    display:   flex;

    align-items:   center;

    justify-content:   center;

    margin-bottom:   8px;

    font-size:   24px;

    color:   555;

    }

    .calculator   {

    display:   grid;

    grid-template-columns:   repeat(4,   1fr);

    gap:   12px;

    padding:   20px;

    }

    .calc-btn   {

    height:   70px;

    border-radius:   16px;

    display:   flex;

    align-items:   center;

    justify-content:   center;

    font-size:   24px;

    font-weight:   500;

    cursor:   pointer;

    transition:   all   0.2s   ease;

    }

    .calc-btn:hover   {

    transform:   scale(0.95);

    }

    .calc-number   {

    background:   f8f8f8;

    }

    .calc-operator   {

    background:   000;

    color:   white;

    }

    .calc-display   {

    height:   120px;

    display:   flex;

    align-items:   flex-end;

    justify-content:   flex-end;

    padding:   20px;

    font-size:   48px;

    font-weight:   300;

    overflow:   hidden;

    }

    .page-title   {

    font-size:   2rem;

    font-weight:   700;

    margin-bottom:   2rem;

    color:   white;

    text-align:   center;

    }

    

    

    

    李司青的手机