.fal, .far { font-family: "Font Awesome 5 Pro" !important; } .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 { padding-left: var(--sidebar_width) !important; width: calc(100% - var(--sidebar_width)); padding: 60px 0 20px; box-sizing: border-box; background-color: #f7f7f9; min-height: calc(100vh - 61px); } /* 淇敼鏍囪鏍峰紡 */ .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 { width: 100%; overflow: hidden; padding: 10px 10px 0 15px; } .products-grid { display: grid; width: 100%; gap: var(--product_item_gap); grid-template-columns: repeat(auto-fill, minmax(var(--product_item_min_width), 1fr)); transition: grid-template-columns 0.3s ease; margin-bottom: 10px; } /* 鍟嗗搧鍗＄墖鏍峰紡浼樺寲 */ .product-item { background: #ffffff; border: 1px solid #eee; transition: all 0.2s ease; display: inline-block; flex-direction: column; position: relative; cursor: pointer; vertical-align: top; box-sizing: border-box; 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; display: flex; flex: 1; } .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-footer { padding: 5px 15px 0 15px; } .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-description p { margin-bottom: 0; } .product-price-section { margin: 0; margin-top: auto; margin-bottom: 10px; } .price-main { display: flex; align-items: baseline; gap: 4px; color: #ff4d4f; } .price-main .currency { font-size: 14px; } .price-main .amount { font-size: 20px; font-weight: 500; } .price-main .period { color: #999; font-size: 13px; } .daily-average, .member-daily-average { color: #999; font-size: 12px; } .daily-average b, .member-daily-average b { color: #ff4d4f; font-size: 15px; font-weight: 700; } .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 { width: 100%; padding-top: 66px; padding-left: 10px !important; 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%; } .price-original { font-size: 12px; color: #999; margin-bottom: 5px; } .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; } .ewy-elem-quote #description { font-size: 14px; color: #b074d1; } .icon-sm { width: 1.5rem; height: 1.5rem; line-height: 1.5rem; text-align: center; font-size: 75%; }