<style>
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        background: #f2f2f2;
    }
    .container {
        width: 80%;
        margin: auto;
        overflow: hidden;∫
    }
    .header {
        background: #fff;
        color: #333333;
        padding: 20px;
        margin-bottom: 15px;
        display: flex;
        align-items: center;
    }
    .header input[type="text"] {
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        width: 200px; 
        margin-right: 10px;
    }
    .header button {
        padding: 10px 15px;
        background: #5cb85c;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }
    .header button:hover {
        background: #4cae4c;
    }

    .tabs {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        background: #333;
        color: #fff;
    }
    .tab {
        display: inline-block;
        padding: 10px 20px;
        cursor: pointer;
        color: #fff;
    }
    .tab:hover {
        background: #555;
    }
    .tab:first-child {
        margin-left: 0;  /* 第一个 tab 没有左边距 */
    }

    .search-container {
        background: #fff;
        padding: 20px;
        margin: 15px auto; /* 与 .header 相同的外边距和填充 */
        display: flex;
        align-items: center;
        width: 80%; /* 和 .container 一致 */
        position: relative;
    }

    .search-container input[type="text"] {
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        width: 300px; /* 调整以适应按钮 */
        margin-right: 10px;
    }

    .search-container button {
        padding: 10px 15px;
        background: #5cb85c;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        width: auto; /* 定义按钮宽度 */
    }

    .search-container button:hover {
        background: #4cae4c;
    }

    #search-tip {
      position: absolute;
      bottom: -1px;
      left: 20px;
      right: -20px;
      font-size: 80%;
      color: : #bbb;
      background-color: #fff;
      border: 0px solid #ccc;
      padding: 0px;
      display: none;
    }

    .button-container {
        margin-left: 15px; /* 按钮组之间的左边距 */
    }

    .button-container button {
        margin-right: 15px; /* 按钮之间的右边距 */
    }

    #suggestions-container {
        display: block; 
        position: absolute;
        top: 100%; /* 相对于 search-container 底部定位 */
        left: 0;
        right: 0;
        border: 0px solid #ccc;
        border-top: none;
        background-color: #fff;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        z-index: 1000;
    }

    .suggestion-item {
        padding: 5px 10px;
        border-bottom: 1px solid #eee;
        cursor: pointer;
        font-size: : 12px;
    }

    .suggestion-item:last-child {
        border-bottom: none;
    }

    .suggestion-item:hover {
        background-color: #f0f0f0;
    }

    #search-history {
        color: #757575; /* 灰色字体 */
        font-size: 12px; /* 较小的字体大小 */
        margin-top: 10px; /* 在搜索框和搜索历史之间添加一些空间 */
    }

    .search-history-item {
        margin-bottom: 5px; /* 在搜索历史条目之间添加一些空间 */
    }

    .search-container {
        position: relative;
        /* 其他样式保持不变 */
    }

    #search-history {
        display: block;
        position: absolute;
        top: 50px; /* 根据需要调整，以便它显示在搜索框下方 */
        left: 0;
        background-color: #fff;
        width: 100%; /* 或者是搜索框的宽度，根据需要调整 */
        /* 其他样式保持不变 */
    }

    table {
        width: 80%;
        margin: auto;
        margin-bottom: 15px;
        border-collapse: collapse;
    }
    table, th, td {
        border: 1px solid #ddd;
    }
    th, td {
        text-align: left;
        padding: 8px;
    }
    th {
        color: #666666;
        font-size: 14px;
        background-color: #f2f2f2;
    }
    tr:nth-child(even) {
        background-color: #f9f9f9;
    }
    .delete-button {
        background-color: #ff4d4d;
        color: white;
        padding: 5px 10px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }
    .delete-button:hover {
        background-color: #ff6666;
    }
    .suggestion-box {
        background: #FFFFFF;
        border: 1px solid #CCCCCC;
        border-radius: 4px;
        display: none; /* 默认不显示 */
        position: relative;
        top: 100%;
        width: 200px; /* 与搜索框宽度一致 */
    }
    .suggestion-item {
        padding: 5px 10px;
        cursor: pointer;
        border-bottom: 1px solid #EEEEEE;
    }
    .suggestion-item:last-child {
        border-bottom: none;
    }
    .suggestion-item:hover {
        background-color: #F0F0F0;
    }
</style>