.boheyun_adv { display: inline-block; padding-left: 3px; padding-right: 3px; border: 1px solid; font-size: 12px !important; font-style: normal; line-height: 16px !important; border-radius: 2px; border-color: #0008ff; background: #fff; color: #0008ff !important; position: relative; float: right; margin-top: 5px; } .boheyun_bq { background-color: rgba(200, 255, 0, 0.685); color: rgb(0, 0, 0) !important; margin-right: 2px; min-width: max-content; padding: 0 8px; height: 24px; line-height: 24px !important; font-size: 12px !important; font-weight: bold; border-radius: 2px; display: inline-block; margin-bottom: 8px; } .banner-desc p, .banner-desc p span { margin-bottom: 0 !important; font-size: 12px !important; } .desc-box { margin-top: 10px !important; display: flex; } .desc-box .badge { font-family: Arial !important; font-weight: bold; } .desc-box .badge-score { color: #156ffb; font-weight:normal; background-image: linear-gradient(0deg, #fff, #f2f2f2); } .desc-box .badge-warning { color: #fff; background-color: #fc9f48; } .desc-box .badge-light-dark { background-image: linear-gradient(0deg, #f2f2f2, #eeeeee); } /* 调整主内容区域布局 */ .col-sm-12 { margin-left: 250px; width: calc(100% - 250px); padding: 60px 0 20px; box-sizing: border-box; background-color: #f7f7f9; } /* 修改标语样式 */ .product-headline { background: #fff; color: #333; padding: 15px 20px; border-radius: 0; border: 1px solid #f1f1f1; margin-bottom: 20px; display: none; } .headline-title { font-size: 16px; font-weight: 600; margin: 0 0 8px 0; color: #333; } .headline-content { font-size: 13px; color: #666; line-height: 1.5; } /* 商品列表容器 */ .products-container { min-height: calc(100vh - 200px); width: 100%; overflow: hidden; padding-top: 10px; padding-left: 15px; } .products-grid { display: block; margin: 0 -5px; width: calc(100% + 20px); } /* 商品卡片样式优化 */ .product-item { background: #ffffff; border: 1px solid #eee; transition: all 0.2s ease; display: inline-block; flex-direction: column; position: relative; cursor: pointer; margin: 0 5px 20px; vertical-align: top; box-sizing: border-box; width: calc((100% - 20px)); z-index: 1; box-shadow: 0px 5px 20px 3px rgba(230, 233, 249, 0.3); border: 1px solid #d4d6d9; border-radius: 0px; transition: all .3s ease; } .product-item:hover { box-shadow: -2px -2px 20px rgba(55, 99, 170, 0.1), 8px 8px 20px rgba(55, 99, 170, 0.1); border-color: #0052d9; z-index: 2; } .product-header { padding: 15px; border-bottom: 1px solid #eee; position: relative; background: #f7f7f9; display: flex; justify-content: space-between; align-items: flex-start; width: 100%; } .product-title { color: #000; font-size: 14px; font-weight: 500; margin: 0; -webkit-font-smoothing: subpixel-antialiased; word-break: break-all; word-wrap: break-word; } .product-stock { padding-left: 10px; color: #a9a9a9; font-size: 12px; position: relative; margin: 0; word-wrap: break-word; } .product-stock.warning { color: #f0c000; } .product-stock.danger { color: #f87878; } .product-stock::after { position: absolute; content: ""; background: #d4d6d9; width: 1px; height: 12px; top: 3px; left: 0px; } .product-tag { display: inline-flex; align-items: center; background: rgba(43, 109, 229, 0.1); color: #2B6DE5; padding: 2px 8px; font-size: 12px; border-radius: 2px; white-space: nowrap; margin-left: 8px; flex-shrink: 0; } .product-body { padding: 15px; padding-bottom: 0;  /* 移除底部padding */ flex: 1; display: flex; flex-direction: column; gap: 12px; background: #ffffff; } .product-description { font-size: 13px; color: #666; line-height: 1.6; margin: 0; flex: 1; } .product-price-section { margin: 0; margin-top: auto;  /* 将价格部分推到底部 */ } .price-main { display: flex; align-items: baseline; gap: 4px; color: #ff4d4f;  /* 改为红色 */ margin-bottom: 4px; } .price-main .currency { font-size: 14px; } .price-main .amount { font-size: 20px; font-weight: 500; } .price-main .period { color: #999; font-size: 13px; } .btn-buy { padding: 12px; background: #0056ff; color: #fff; font-size: 13px; text-align: center; transition: all 0.2s ease; margin: 0 -15px 0;  /* 使按钮与卡片边缘对齐 */ border-radius: 0; text-decoration: none; display: block; } .btn-buy:hover { background: #0056ff; color: #fff; } .sold-out { padding: 12px; background: #f8f9fa; color: #999; font-size: 13px; text-align: center; cursor: not-allowed; margin: 0 -15px 0;  /* 使按钮与卡片边缘对齐 */ } /* 分页样式 */ .pagination-wrapper { margin-top: 30px; display: flex; justify-content: center; } /* 空状态样式 */ .empty-state { text-align: center; padding: 40px 20px; color: #999; } .empty-icon { font-size: 32px; margin-bottom: 15px; color: #ccc; } /* 移动端适配 */ @media (max-width: 768px) { .navtop-standingPosition { top: 60px;  /* 移动端头栏更小 */ } .category-nav { top: 120px;  /* 60px + 60px */ height: calc(100vh - 106px); } .col-sm-12 { margin-left: 0; width: 100%; padding-top: 66px; padding-left: 10px; padding-right: 10px; } .page-desc { max-width: 200px; } .products-container { padding-left: 2px !important; padding-right: 2px !important; } } /* 折叠按钮样式 */ .sidebar-toggle { position: fixed; left: 20px; bottom: 90px; width: 40px; height: 40px; background: #2B6DE5; color: #fff; border-radius: 50%; display: none;  /* 默认隐藏 */ align-items: center; justify-content: center; cursor: pointer; z-index: 1000; box-shadow: 0 2px 8px rgba(43, 109, 229, 0.3); transition: all 0.3s ease; } .sidebar-toggle:hover { background: #2259c7; } .sidebar-toggle i { font-size: 18px; } /* 移动端适配 */ @media (max-width: 768px) { .sidebar-toggle { display: flex;  /* 移动端显示 */ } .category-nav { transform: translateX(-240px);  /* 默认隐藏 */ transition: transform 0.3s ease; } .category-nav.show { transform: translateX(0);  /* 显示侧栏 */ } } /* 修复页面横向滚动 */ html, body { overflow-x: hidden; width: 100%; } /* 修复容器宽度 */ .row { margin: 0; width: 100%; } /* 响应式布局 - 直接计算宽度 */ @media (min-width: 576px) { .product-item { width: calc((100% - 35px) / 2);  /* 两列 */ } } @media (min-width: 768px) { .product-item { width: calc((100% - 290px) / 2);  /* 两列 */ } } @media (min-width: 1000px) { .product-item { width: calc((100% - 305px) / 3);  /* 三列 */ } } @media (min-width: 1300px) { .product-item { width: calc((100% - 320px) / 4);  /* 四列 */ } } @media (min-width: 1600px) { .product-item { width: calc((100% - 335px) / 5);  /* 五列 */ } } @media (min-width: 1800px) { .product-item { width: calc((100% - 350px) / 6);  /* 六列 */ } } @media (min-width: 2000px) { .product-item { width: calc((100% - 360px) / 7);  /* 七列 */ } } @media (min-width: 2200px) { .product-item { width: calc((100% - 375px) / 8);  /* 六列 */ } } .price-original { font-size: 12px; color: #999; } .discount-tag { color: #ff4d4f; font-weight: bold; margin-right: 4px; } .ewy-elem-quote { padding: 15px; margin: 0; width: calc(100vw - 280px); } /* 灰色主题提示框 */ .ewy-elem-quote.grey-theme { margin-left: 15px; border: 1px solid #d4d6d9; border-left: 5px solid #e8e8e8; background-color: #f9f9f9; } /* 红色主题提示框 */ .ewy-elem-quote.red-theme { background: rgba(255, 52, 52, 0.1); border: 1px solid rgba(255, 52, 52, 0.3); color: #B22222; } /* 蓝色主题提示框 */ .ewy-elem-quote.blue-theme { color: #002da0; border: 1px solid #d5e7ff; background: #d5e7ff; margin-left: 15px; } .ewy-elem-quote a { position: relative; cursor: pointer; display: inline-block; padding-right: 20px; } .ewy-elem-quote a::after { content: ""; position: absolute; right: 10px; top: 50%; width: 5px; height: 5px; border-right: 2px solid var(--primary); border-bottom: 2px solid var(--primary); transform: translateY(-50%) rotate(-45deg); transition: right 0.3s ease; } .ewy-elem-quote a:hover::after { right: 5px; } /* 公告轮播样式 */ .announcement-wrapper { margin-bottom: 10px; background: #fff; box-shadow: 0 0 4px rgba(0, 0, 0, 0.1); overflow: hidden; position: relative; margin-left: 15px; width: calc(100vw - 280px); } .announcement-wrapper:before { content: ""; position: absolute; width: 60px; height: 4px; background: #0056ff; box-shadow: 0 16px 16px 0 rgba(55, 69, 103, 0.02), 0 8px 8px 0 rgba(235, 240, 252, 0.02); border-radius: 0 0 2px 2px; left: 24px; top: 0; } .minimal-carousel { padding: 20px; position: relative; } .carousel-container { position: relative; overflow: hidden; } .slide { display: none; text-decoration: none; color: #374567; padding: 10px 0; transition: opacity 0.3s ease; opacity: 0; position: absolute; width: 100%; left: 0; top: 0; } .slide.active { display: block; opacity: 1; position: relative; } .slide .badge { display: inline-block; padding: 2px 12px; background: linear-gradient(90deg, #0e52ff 0, #0e52ff 100%); color: #fff; font-size: 12px; font-weight: bold; border-radius: 4px; margin-right: 10px; vertical-align: middle; } .content-wrapper { display: inline-block; vertical-align: middle; max-width: calc(100% - 120px); overflow: hidden; white-space: nowrap; } .content { display: inline-block; font-size: 14px; color: #7a8ba6; transition: transform 0.5s ease; } .content.scrolling { animation: scrollText 15s linear infinite; } @keyframes scrollText { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } .carousel-controls { display: flex; align-items: center; justify-content: center; margin-top: 10px; } @media (max-width: 768px) { .ewy-elem-quote { padding: 10px; width: 100%; } .ewy-elem-quote.grey-theme, .ewy-elem-quote.blue-theme, .announcement-wrapper { margin-left: 0; } .announcement-wrapper { width: 100%; } } .nav-btn { background: none; border: 1px solid #ebf0fc; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #7a8ba6; font-size: 16px; transition: all 0.3s ease; } .nav-btn:hover { background: #0e52ff; color: #fff; border-color: #0e52ff; } .indicators { display: flex; margin: 0 10px; } .indicator { width: 8px; height: 8px; border-radius: 50%; background: #ebf0fc; margin: 0 4px; cursor: pointer; transition: all 0.3s ease; } .indicator.active { background: #0e52ff; transform: scale(1.2); } /* 响应式调整 */ @media (max-width: 768px) { .content-wrapper { max-width: calc(100% - 80px); } .slide .badge { padding: 2px 8px; font-size: 11px; } .content { font-size: 13px; } } .login-alert p { margin: 0; } .login-alert { margin-bottom: 10px; box-shadow: 0 0 4px rgba(0, 0, 0, 0.1); } .banner-desc { font-size: 14px; line-height: 1.5; } .banner-desc .first-line { color: #5a98db; display: block; font-size: 13px; } .banner-desc .second-line { color: #ba3772; display: block; font-size: 13px; margin-bottom: 0 !important; } .red-theme p { color: #ff4d4f; font-size: 13px; line-height: 1.6; margin: 0; } .small, small { font-size: 90% !important; } .ewy_tip { background-color: rgba(252, 241, 235, 1); color: rgba(254, 95, 71, 1) !important; margin-right: 2px; min-width: max-content; padding: 0 8px; height: 24px; line-height: 24px !important; font-size: 12px !important; font-weight: bold; border-radius: 2px; display: inline-block; margin-bottom: 8px; } .ewy_lcpu { display: inline-block; padding: 3px; border: 2px solid #cfcfcf; font-size: 12px !important; font-style: normal; line-height: 16px !important; border-radius: 5px; background-image: linear-gradient(-225deg, #DFFFCD 0%, #90F9C4 48%, #39F3BB 100%); background: linear-gradient(220.55deg, #97E8B5 0%, #5CB67F 100%); color: #fff !important; position: relative; float: right; } .ewy_mcpu { display: inline-block; padding: 3px; border: 2px solid #cfcfcf; font-size: 12px !important; font-style: normal; line-height: 16px !important; border-radius: 5px; background-image: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%); color: #fff !important; position: relative; float: right; } .ewy_hcpu { display: inline-block; padding: 3px; border: 2px solid #cfcfcf; font-size: 12px !important; font-style: normal; line-height: 16px !important; border-radius: 5px; background-image: linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%); color: #fff !important; position: relative; float: right; } .ewy_bandw { display: inline-block; padding: 3px; border: 2px solid #cfcfcf; font-size: 12px !important; font-style: normal; line-height: 16px !important; border-radius: 5px; background-image: linear-gradient(to right, #0acffe 0%, #495aff 100%); color: #fff !important; position: relative; float: right; } hr { margin-top: initial !important; border-top: 1px solid rgba(0, 0, 0, .1) !important; }