css布局实现自适应商品库列表效果代码
代码语言:html
所属分类:响应式
代码描述:css布局实现自适应商品库列表效果代码,可过滤、可列表显示、缩略图显示
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap"); * { box-sizing: border-box; } :root { --app-bg: #101827; --sidebar: rgba(21, 30, 47,1); --sidebar-main-color: #fff; --table-border: #1a2131; --table-header: #1a2131; --app-content-main-color: #fff; --sidebar-link: #fff; --sidebar-active-link: #1d283c; --sidebar-hover-link: #1a2539; --action-color: #2869ff; --action-color-hover: #6291fd; --app-content-secondary-color: #1d283c; --filter-reset: #2c394f; --filter-shadow: rgba(16, 24, 39, 0.8) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px; } .light:root { --app-bg: #fff; --sidebar: #f3f6fd; --app-content-secondary-color: #f3f6fd; --app-content-main-color: #1f1c2e; --sidebar-link: #1f1c2e; --sidebar-hover-link: rgba(195, 207, 244, 0.5); --sidebar-active-link: rgba(195, 207, 244, 1); --sidebar-main-color: #1f1c2e; --filter-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; } body, html { margin: 0; padding: 0; height: 100%; width: 100%; } body { overflow: hidden; font-family: "Poppins", sans-serif; background-color: var(--app-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .app-container { border-radius: 4px; width: 100%; height: 100%; max-height: 100%; max-width: 1280px; display: flex; overflow: hidden; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; max-width: 2000px; margin: 0 auto; } .sidebar { flex-basis: 200px; max-width: 200px; flex-shrink: 0; background-color: var(--sidebar); display: flex; flex-direction: column; } .sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 16px; } .sidebar-list { list-style-type: none; padding: 0; } .sidebar-list-item { position: relative; margin-bottom: 4px; } .sidebar-list-item a { display: flex; align-items: center; width: 100%; padding: 10px 16px; color: var(--sidebar-link); text-decoration: none; font-size: 14px; line-height: 24px; } .sidebar-list-item svg { margin-right: 8px; } .sidebar-list-item:hover { background-color: var(--sidebar-hover-link); } .sidebar-list-item.active { background-color: var(--sidebar-active-link); } .sidebar-list-item.active:before { content: ""; position: absolute; right: 0; background-color: var(--action-color); height: 100%; width: 4px; } @media screen and (max-width: 1024px) { .sidebar { display: none; } } .mode-switch { background-color: transparent; border: none; padding: 0; color: var(--app-content-main-color); display: flex; justify-content: center; align-items: center; margin-left: auto; margin-right: 8px; cursor: pointer; } .mode-switch .moon { fill: var(--app-content-main-color); } .mode-switch.active .moon { fill: none; } .account-info { display: flex; align-items: center; padding: 16px; margin-top: auto; } .account-info-picture { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex-shrink: 0; } .account-info-picture img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .account-info-name { font-size: 14px; color: var(--sidebar-main-color); margin: 0 8px; overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; } .account-info-more { color: var(--sidebar-main-color); padding: 0; border: none; background-color: transparent; margin-left: auto; } .app-icon { color: var(--sidebar-main-color); } .app-icon svg { width: 24px; height: 24px; } .app-content { padding: 16px; background-color: var(--app-bg); height: 100%; flex: 1; max-height: 100%; display: flex; flex-direction: column; } .app-content-header { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; } .app-content-headerText { color: var(--app-content-main-color); font-size: 24px; line-height: 32px; margin: 0; } .app-content-headerButton { background-color: var(--action-color); color: #fff; font-size: 14px; line-height: 24px; border: none; border-radius: 4px; height: 32px; padding: 0 16px; transition: 0.2s; cursor: pointer; } .app-content-headerButton:hover { background-color: var(--action-color-hover); } .app-content-actions { display: flex; justify-content: space-between; align-items: center; padding: 16px 4px; } .app-content-actions-wrapper { display: flex; align-items: center; margin-left: auto; } @media screen and (max-width: 520px) { .app-content-actions { flex-direction: column; } .app-content-actions .search-bar { max-width: 100%; order: 2; } .app-content-actions .app-content-actions-wrapper { padding-bottom: 16px; order: 1; } } .search-bar { background-color: var(--app-content-secondary-color); border: 1px solid var(--app-content-secondary-color); color: var(--app-content-main-color); font-size: 14px; line-height: 24px; border-radius: 4px; padding: 0px 10px 0px 32px; height: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); background-size: 16px; background-repeat: no-repeat; background-position: left 10px center; width: 100%; max-width: 320px; transition: 0.2s; } .light .search-bar { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231f1c2e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); } .search-bar:placeholder { color: var(--app-content-main-color); } .search-bar:hover { border-color: var(--action-color-hover); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236291fd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); } .search-bar:focus { outline: none; border-color: var(--action-color); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232869ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); } .action-button { border-radius: 4px; height: 32px; background-color: var(--app-content-secondary-color); border: 1px solid var(--app-content-secondary-color); display: flex; align-items: center; color: var(--app-content-main-color); font-size: 14px; margin-left: 8px; cursor: pointer; } .action-button span { margin-right: 4px; } .action-button:hover { border-color: var(--action-color-hover); } .action-button:focus, .action-button.active { outline: none; color: var(--action-color); border-color: var(--action-color); } .filter-button-wrapper { position: relative; } .filter-menu { background-color: var(--app-content-secondary-color); position: absolute; top: calc(100% + 16px); right: -74px; border-radius: 4px; padding: 8px; width: 220px; z-index: 2; box-shadow: var(--filter-shadow); visibility: hidden; opacity: 0; transition: 0.2s; } .filter-menu:before { content: ""; position: absolute; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid var(--app-content-secondary-color); bottom: 100%; left: 50%; transform: translatex(-50%); } .filter-menu.active { visibility: visible; opacity: 1; top: calc(100% + 8px); } .filter-menu label { display: block; font-size: 14px; color: var(--app-content-main-color); margin-bottom: 8px; } .filter-menu select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; padding: 8px 24px 8px 8px; background-position: right 4px center; border: 1px solid var(--app-content-main-color); border-radius: 4px; color: var(--app-content-main-color); font-size: 12px; background-color: transparent; margin-bottom: 16px; width: 100%; } .filter-menu select option { font-size: 14px; } .light .filter-menu select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231f1c2e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); } .filter-menu select:hover { border-color: var(--action-color-hover); } .filter-menu select:focus, .filter-menu select.active { outline: none; color: var(--action-color); border-color: var(--action-color); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232869ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); } .filter-menu-buttons { display: flex; align-items: center; justify-content: space-between; } .filter-button { border-radius: 2px; font-size: 12px; padding: 4px 8px; cursor: pointer; border: none; color: #fff; } .filter-button.apply { background-color: var(--action-color); } .filter-button.reset { background-color: var(--filter-reset); } .products-area-wrapper { width: 100%; max-height: 100%; overflow: auto; padding: 0 4px; } .tableView .products-header { display: flex; align-items: center; border-radius: 4px; background-color: var(--app-content-secondary-color); position: sticky; top: 0; } .tableView .products-row { display: flex; align-items: center; border-radius: 4px; } .tableView .products-row:hover { box-shadow: var(--filter-shadow); background-color: var(--app-content-secondary-color); } .tableView .products-row .cell-more-button { display: none; } .tableView .product-cell { flex: 1; padding: 8px 16px; color: var(--app-content-main-color); font-size: 14px; display: flex; align-items: center; } .tableView .product-cell img { width: 32px; height: 32px; border-radius: 6px; margin-right: 6px; } @media screen and (max-width: 780px) { .tableView .product-cell { font-size: 12px; } .tableView .product-cell.image span { display: none; } .tableView .product-cell.image { flex: 0.2; } } @media screen and (max-width: 520px) { .tableView .product-cell.category, .tableView .product-cell.sales { display: none; } .tableView .product-cell.status-cell { flex: 0.4; } .tableView .product-cell.stock, .tableView .product-cell.price { flex: 0.2; } } @media screen and (max-width: 480px) { .tableView .product-cell.stock { display: none; } .tableView .product-cell.price { flex: 0.4; } } .tableView .sort-button { padding: 0; background-color: transparent; border: none; cursor: pointer; color: var(--app-content-main-color); margin-left: 4px; display: flex; align-items: center; } .tableView .sort-button:hover { color: var(--action-color); } .tableView .sort-button svg { width: 12px; } .tableView .cell-label { display: none; } .status { border-radius: 4px; display: flex; align-items: center; padding: 4px 8px; font-size: 12px; } .status:before { content: ""; width: 4px; height: 4px; border-radius: 50%; margin-right: 4px; } .status.active { color: #2ba972; background-color: rgba(43, 169, 114, 0.2); } .status.active:before { background-color: #2ba972; } .status.disabled { color: #59719d; background-color: rgba(89, 113, 157, 0.2); } .status.disabled:before { background-color: #59719d; } .gridView { display: flex; flex-wrap: wrap; margin: 0 -8px; } @media screen and (max-width: 520px) { .gridView { margin: 0; } } .gridView .products-header { display: none; } .gridView .products-row { margin: 8px; width: calc(25% - 16px); background-color: var(--app-content-secondary-color); padding: 8px; border-radius: 4px; cursor: pointer; transition: transform 0.2s; position: relative; } .gridView .products-row:hover { transform: scale(1.01); box-shadow: var(--filter-shadow); } .gridView .products-row:hover .cell-more-button { display: flex; } @media screen and (max-width: 1024px) { .gridView .products-row { width: calc(33.3% - 16px); } } @media screen and (max-width: 820px) { .gridView .products-row { width: calc(50% - 16px); } } @media screen and (max-width: 520px) { .gridView .products-row { width: 100%; margin: 8px 0; } .gridView .products-row:hover { transform: none; } } .gridView .products-row .cell-more-button { border: none; padding: 0; border-radius: 4px; position: absolute; top: 16px; right: 16px; z-index: 1; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; background-color: rgba(16, 24, 39, 0.7); color: #fff; cursor: pointer; display: none; } .gridView .product-cell { color: var(--app-content-main-color); font-size: 14px; margin-bottom: 8px; } .gridView .product-cell:not(.image) { display: flex; align-items: center; justify-content: space-between; } .gridView .product-cell.image span { font-size: 18px; line-height: 24px; } .gridView .product-cell img { width: 100%; height: 140px; -o-object-fit: cover; object-fit: cover; border-radius: 4px; margin-bottom: 16px; } .gridView .cell-label { opacity: 0.6; } </style> </head> <body> <div class="app-container"> <div class="sidebar"> <div class="sidebar-header"> <div class="app-icon"> <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M507.606 371.054a187.217 187.217 0 00-23.051-19.606c-17.316 19.999-37.648 36.808-60.572 50.041-35.508 20.505-75.893 31.452-116.875 31.711 21.762 8.776 45.224 13.38 69.396 13.38 49.524 0 96.084-19.286 131.103-54.305a15 15 0 004.394-10.606 15.028 15.028 0 00-4.395-10.615zM27.445 351.448a187.392 187.392 0 00-23.051 19.606C1.581 373.868 0 377.691 0 381.669s1.581 7.793 4.394 10.606c35.019 35.019 81.579 54.305 131.103 54.305 24.172 0 47.634-4.604 69.396-13.38-40.985-.259-81.367-11.206-116.879-31.713-22.922-13.231-43.254-30.04-60.569-50.039zM103.015 375.508c24.937 14.4 53.928 24.056 84.837 26.854-53.409-29.561-82.274-70.602-95.861-94.135-14.942-25.878-25.041-53.917-30.063-83.421-14.921.64-29.775 2.868-44.227 6.709-6.6 1.576-11.507 7.517-11.507 14.599 0 1.312.172 2.618.512 3.885 15.32 57.142 52.726 100.35 96.309 125.509zM324.148 402.362c30.908-2.799 59.9-12.454 84.837-26.854 43.583-25.159 80.989-68.367 96.31-125.508.34-1.267.512-2.573.512-3.885 0-7.082-4.907-13.023-11.507-14.599-14.452-3.841-29.306-6.07-44.227-6.709-5.022 29.504-15.121 57.543-30.063 83.421-13.588 23.533-42.419 64.554-95.862 94.134zM187.301 366.948c-15.157-24.483-38.696-71.48-38.696-135.903 0-32.646 6.043-64.401 17.945-94.529-16.394-9.351-33.972-16.623-52.273-21.525-8.004-2.142-16.225 2.604-18.37 10.605-16.372 61.078-4.825 121.063 22.064 167.631 16.325 28.275 39.769 54.111 69.33 73.721zM324.684 366.957c29.568-19.611 53.017-45.451 69.344-73.73 26.889-46.569 38.436-106.553 22.064-167.631-2.145-8.001-10.366-12.748-18.37-10.605-18.304 4.902-35.883 12.176-52.279 21.529 11.9 30.126 17.943 61.88 17.943 94.525.001 64.478-23.58 111.488-38.702 135.912zM266.606 69.813c-2.813-2.813-6.637-4.394-10.615-4.394a15 15 0 00-10.606 4.394c-39.289 39.289-66.78 96.005-66.78 161.231 0 65.256 27.522 121.974 66.78 161.231 2.813 2.813 6.637 4.394 10.615 4.394s7.793-1.581 10.606-4.394c39.248-39.247 66.78-95.96 66.78-161.231.001-65.256-27.511-121.964-66.78-161.231z"/></svg> </div> </div> <ul class="sidebar-list"> <li class="sidebar-list-item"> <a href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg> <span>Home</span> </a> </li> <li class="sidebar-list-item active"> <a href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-bag"><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 0 1-8 0"/></svg> <span>Products</span> </a> </li> <li class="sidebar-list-item"> <a href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-pie-chart"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></svg> <span>Statistics</span> </a> </li> <li class="sidebar-list-item"> <a href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-inbox"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg> <span>Inbox</span> </a> </li> <li class="sidebar-list-item"> <a href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bell"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg> <span>Notifications</span> </a> </li> </ul> <div class="account-info"> <div class="account-info-picture"> <img src="//repo.bfw.wiki/bfwrepo/image/606b0054bb7fc.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_300,/quality,q_90" alt="Account"> </div> <div class="account-info-name">Monica G.</div> <button class="account-info-more"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-horizontal"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg> </button> </div> </div> <div class="app-content"> <div class="app-content-header"> <h1 class="app-content-headerText">Products</h1> <button class="mode-switch" title="Switch Theme"> <svg class="moon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="24" height="24" viewBox="0 0 24 24"> <defs></defs> <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path> </svg> </button> <button class="app-content-headerButton">Add Product</button> </div> <div class="app-content-actions"> <input class="search-bar" placeholder="Search..." type="text"> <div class="app-content-actions-wrapper"> <div class="filter-button-wrapper"> <button class="action-button filter jsFilter"><span>Filter</span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-filter"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg></button> <div class="filter-menu"> <label>Category</label> <select> <option>All Categories</option> <option>Furniture</option> <option>Decoration</option> <option>Kitchen</option> <option>Bathroom</option> </select> <label>Status</label> <select> <option>All Status</option> <option>Active</option> <option>Disabled</option> </select> <div class="filter-menu-buttons"> <button class="filter-button reset"> Reset </button> <button class="filter-button apply"> Apply </button> </div> </div> </div> <button class="action-button list active" title="List View"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-list"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg> </button> <button class="action-button grid" title="Grid View"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-grid"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg> </button> </div> </div> <div class="products-area-wrapper tableView"> <div class="products-header"> <div class="product-cell image"> Items <button class="sort-button"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512"><path fill="currentColor" d="M496.1 138.3L375.7 17.9c-7.9-7.9-20.6-7.9-28.5 0L226.9 138.3c-7.9 7.9-7.9 20.6 0 28.5 7.9 7.9 20.6 7.9 28.5 0l85.7-85.7v352.8c0 11.3 9.1 20.4 20.4 20.4 11.3 0 20.4-9.1 20.4-20.4V81.1l85.7 85.7c7.9 7.9 20.6 7.9 28.5 0 7.9-7.8 7.9-20.6 0-28.5zM287.1 347.2c-7.9-7.9-20.6-7.9-28.5 0l-85.7 85.7V80.1c0-11.3-9.1-20.4-20.4-20.4-11.3 0-20.4 9.1-20.4 20.4v352.8l-85.7-85.7c-7.9-7.9-20.6-7.9-28.5 0-7.9 7.9-7.9 20.6 0 28.5l120.4 120.4c7.9 7.9 20.6 7.9 28.5 0l120.4-120.4c7.8-7.9 7.8-20.7-.1-28.5z"/></svg> </button> </div> <div class="product-cell category">Category<button class="sort-button"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height=".........完整代码请登录后点击上方下载按钮下载查看
网友评论0