/* ????index.html???????? */
:root {
--primary-color: #0d9084;
--primary-light: rgba(13, 144, 132, 0.1);
--secondary-color: #2C3E50;
--accent-color: #FF6B6B;
--text-color: #2C3E50;
--light-bg: #F8FAFC;
--border-color: rgba(0, 0, 0, 0.05);
}
body {
font-family: 'Noto Sans SC', sans-serif;
color: var(--text-color);
background-color: var(--light-bg);
overflow-x: hidden;
}
.category-filter {
padding: 0.5rem 0;
}
.category-filter h6 {
color: var(--secondary-color);
font-weight: 600;
min-width: 100px;
}
.subcategory-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.product-badge {
position: absolute;
top: 20px;
right: 20px;
border-radius: 30px;
padding: 0.4rem .75rem;
font-size: 0.9rem;
font-weight: 500;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
z-index: 1;
}
.product-badge i{ left: -3px;
display: inline-block;
vertical-align: middle;
position: relative;
top: -2px;
font-size: 17px;
}
/* .btn-address{*/
/* background: var(--primary-light);*/
/*color: var(--primary-color);*/
/*border-radius: 22px;*/
/*line-height: 24px;*/
/*font-size: .8rem;*/
/*padding: .2rem .75rem;*/
/* }*/
/* .btn-address i{display: inline-block;vertical-align: middle;position: relative;font-size: 17px;margin-right: 2px;}*/
.subcategory-tags .filter-tag {
font-size: 0.9rem;
padding: 0.3rem 1rem;
background: var(--light-bg);
border: 1px solid var(--border-color);
transition: all 0.2s ease;
}
.subcategory-tags .filter-tag:hover {
background: var(--primary-light);
color: var(--primary-color);
border-color: var(--primary-color);
transform: translateY(-1px);
}
.subcategory-tags .filter-tag.active {
background: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
/* ????????????? */
/*.navbar {*/
/* padding: 1rem 0;*/
/* transition: all 0.3s;*/
/* background: rgba(255, 255, 255, 0.95) !important;*/
/* backdrop-filter: blur(10px);*/
/* box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);*/
/*}*/
/*.navbar.scrolled {*/
/* padding: 0.5rem 0;*/
/* background: rgba(255, 255, 255, 0.98) !important;*/
/*}*/
.market-header {
background: linear-gradient(135deg, #0d9084 0%, #0a6b61 100%);
padding: 4rem 0;
color: white;
margin-bottom: 2rem;
position: relative;
z-index: 1;
}
.market-header h1 {
font-size: 2.5rem;
font-weight: 600;
margin-bottom: 1rem;
}
.market-header p {
font-size: 1.1rem;
opacity: 0.9;
}
.filter-section {
background: white;
border-radius: 16px;
display: block;
padding: 1.5rem;
margin-bottom: 2rem;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
}
.filter-tag {
display: inline-block;
padding: 0.5rem 1rem;
margin: 0.25rem;
border-radius: 20px;
background: var(--light-bg);
color: var(--text-color);
cursor: pointer;
transition: all 0.3s;
}
.filter-tag:hover, .filter-tag.active {
background: var(--primary-color);
color: white;
}
.category-sidebar {
background: white;
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
position: sticky;
top: 90px;
z-index: 1;
}
.category-sidebar .category-item {
display: flex;
align-items: center;
padding: 0.75rem 1rem;
color: var(--text-color);
text-decoration: none;
border-radius: 8px;
transition: all 0.3s;
margin-bottom:0.5rem;
}
.category-sidebar .category-item:hover {
background: var(--primary-light);
color: var(--primary-color);
}
.category-sidebar .category-item.active{
background: var(--primary-color);
color: white;
}
.category-sidebar .category-item:hover i{ padding-left:5px;}
.category-sidebar .category-item.active i{
color: white;
}
.category-sidebar .category-item i {
margin-right: 0.75rem;
display:inline-block;
color: var(--primary-color); transition: all 0.3s;
}
.category-sidebar .category-item.active i {
color: white;
}
.category-sidebar .category-item.active span{color:#fff;}
.sort-btn {
padding: 0.5rem 1rem;
border-radius: 20px;
background: white;
border: 1px solid var(--border-color);
color: var(--text-color);
transition: all 0.3s;
}
.sort-btn:hover, .sort-btn.active {
background: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
/* ???????????? */
.product-card {
border: none;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
height: 100%;
overflow: hidden;
background: white;
margin-bottom: 1.5rem;
cursor:pointer;
}
.product-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}
.product-img-container {
height: 280px; /* ????????????? */
overflow: hidden;
position: relative;
background: #f8f9fa;
}
.product-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.product-card:hover .product-img {
transform: scale(1.1);
}
/*.product-badge {*/
/* position: absolute;*/
/* top: 20px;*/
/* right: 20px;*/
/* border-radius: 30px;*/
/* padding: 0.5rem 1.2rem;*/
/* font-size: 0.9rem;*/
/* font-weight: 500;*/
/* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);*/
/* z-index: 1;*/
/*}*/
.product-card .card-body {
padding: 1.8rem;
}
.product-card .card-title {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 0.8rem;
color: var(--secondary-color); white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.product-card .card-text {
font-size: 0.9rem;
color: #6c757d;
margin-bottom: 1rem;
min-height:44px;
}
.product-price {
font-size: 1.5rem;
font-weight: 700;
color: var(--primary-color);
display: flex;
align-items: center;
}
/*.product-price::before {*/
/* content: "??";*/
/* font-size: 1rem;*/
/* margin-right: 0.2rem;*/
/* font-weight: 500;*/
/*}*/
.btn-outline-primary {
padding: 0.5rem 1rem;
font-weight: 500;
border-radius: 30px;
transition: all 0.3s;
}
.btn-outline-primary:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(13, 144, 132, 0.2);
}
/* ??????????????? */
@media (min-width: 992px) {
.product-grid {
margin: 0 -12px;
}
.product-grid .col-md-4 {
padding: 0 12px;
}
}
@media (max-width: 991px) {
.product-img-container {
height: 240px;
}
}
/* ???????????????? */
.mega-menu {
width: 800px;
border: none;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
animation: fadeIn 0.3s ease;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(10px);
border-top: 3px solid var(--primary-color);
padding: 2rem !important;
}
.mega-menu .category-title {
color: var(--primary-color);
font-weight: 600;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--primary-light);
font-size: 0.95rem;
}
.mega-menu .category-items {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.mega-menu .category-item {
color: var(--text-color);
text-decoration: none;
font-size: 0.9rem;
transition: all 0.2s;
padding: 0.3rem 0;
}
.mega-menu .category-item:hover {
color: var(--primary-color);
transform: translateX(5px);
}
.dropdown:hover .dropdown-menu {
display: block;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 992px) {
.mega-menu {
width: 100%;
margin: 0;
border-radius: 0;
box-shadow: none;
}
}
.search-section {
background: white;
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
}
.search-box .input-group {
border-radius: 30px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.search-box .form-control {
border: 1px solid var(--border-color);
padding-left: 1.5rem;
font-size: 1rem;
padding: 1rem 1.5rem;
font-size: 1rem;
height: auto;
}
.search-box .form-control:focus {
box-shadow: none;
border-color: var(--primary-color);
}
.search-box .btn {
padding: 0 2rem;
background: white;
border: none;
color: var(--primary-color);
transition: all 0.3s;
}
.search-box .btn-primary {
padding: 0 2rem;
background: white;
border: none;
color: var(--primary-color);
transition: all 0.3s;
}
@media (max-width: 767px) {
.product-img-container {
height: 200px;
}
.category-sidebar {
padding: 1rem;
}
.category-sidebar .category-item{padding:.5rem .75rem;}
.market-header h1{font-size: 1.6rem;}
.search-box .form-control{
padding: .75rem 1rem;
}
.market-header{margin-bottom:0;}
.market-header p{
font-size:.95rem;
}
.product-card .card-body {
padding: 1.2rem;
}
.sort-btn{
padding: 0;
border: none;
font-size: .9rem;
}
.sort-btn.active{
background: transparent;
color: var(--primary-color);
/* font-size: .8rem; */
}
.text-muted{font-size:.82rem;}
.filter-section{
padding:1rem;
/* padding-bottom: 1rem; */
/* height: auto; */
}
.row{margin-top:0;}
}
/*provices*/
.reset-btn {
padding: 0.25rem;
margin-left: 0.5rem;
border-radius: 50%;
transition: all 0.2s;
}
.reset-btn:hover {
background-color: var(--primary-light);
color: var(--primary-color) !important;
}
.reset-btn i {
font-size: 1.1rem;
}
.letter-index {
border-bottom: 1px solid var(--border-color);
padding-bottom: 1rem;
}
.letter-link {
display: inline-block;
width: 32px;
height: 32px;
line-height: 32px;
text-align: center;
border-radius: 50%;
color: var(--text-color);
text-decoration: none;
transition: all 0.2s;
}
.letter-link:hover {
background-color: var(--primary-light);
color: var(--primary-color);
}
.letter-link.active {
background-color: var(--primary-color);
color: white;
}
.city-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
padding-top: 1rem;
}
.city-item {
padding: 0.5rem 1rem;
border-radius: 20px;
background-color: var(--light-bg);
color: var(--text-color);
text-decoration: none;
transition: all 0.2s;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.city-item:hover {
background-color: var(--primary-light);
color: var(--primary-color);
transform: translateY(-2px);
}
.city-item.active {
background-color: var(--primary-color);
color: white;
}
.city-item .city-name {
font-weight: 500;
}
.city-item .product-count {
font-size: 0.8rem;
opacity: 0.7;
margin-left: 0.5rem;
}
/* 产品卡片中的城市和优先级信息样式 */
.city-info, .priority-info {
display: flex;
align-items: center;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.85rem;
transition: all 0.2s;
}
.city-info {
background-color: rgba(13, 144, 132, 0.1);
color: var(--primary-color);
}
.priority-info {
background-color: rgba(255, 193, 7, 0.1);
color: #ffc107;
}
.priority-info.urgent {
background-color: rgba(220, 53, 69, 0.1);
color: #dc3545;
}
.priority-info.normal {
background-color: rgba(255, 193, 7, 0.1);
color: #ffc107;
}
.priority-info.low {
background-color: rgba(13, 144, 132, 0.1);
color: var(--primary-color);
}
.city-info i, .priority-info i {
font-size: 0.9rem;
}
.city-info:hover, .priority-info:hover {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.location-badge {
display: inline-flex;
align-items: center;
padding: 0.35rem 0.75rem;
border-radius: 30px;
font-size: 0.85rem;
gap: 0.3rem;
background-color: rgba(13, 144, 132, 0.08);
color: var(--primary-color);
opacity: 0.85;
}
.location-badge i {
font-size: 0.85rem;
opacity: 0.9;
}
/*provicesCity*/
.let{padding: .5rem 1rem;display: block;border-bottom: 1px solid #f5f5f5;/* box-shadow: 0px 1px 2px rgba(0,0,0,.1); */}
.let span{width: 26px;height: 26px;display: inline-block;vertical-align:middle;font-size: .8rem;color: #333;text-align:center;border-radius: 50%;line-height: 26px;margin-right: 5px;/* margin-top: 10px; */cursor:pointer;}
.let span:hover,.let span.on{background:var(--primary-color);color:#fff;}
.provicesCity{transition:all .2s linear;position: fixed;background: #fff;width: 100%;z-index: 1000;bottom: -313px;/* padding: 1rem; */border-top-left-radius: 15px;border-top-right-radius: 15px;left: 0;z-index: 1111;/* box-shadow: 0px 0 5px 0px rgb(0 0 0 / 10%); */border: 1px solid #f5f5f5;display: block;border-top: 5px solid var(--primary-color);}
.provicesCity.active{
bottom:0;
}
.provicesCity .pro a{color:#414246;display: inline-block;height: 32px;line-height: 32px;border-radius: 2px;font-size: 15px;padding-left: 10px;width: 300px;}
.provicesCity .pro a:hover{color:var(--primary-color);}
.provicesCity .pro-top{
height: 260px;
}
.provicesCity .citypop{width: 100%;overflow-x: hidden;font-size: 0;padding: 1rem;display: flex;gap: .75rem;flex-wrap: wrap;}
.provicesCity .citypop span{
background: rgba(248,249,250);
display: inline-block;
vertical-align: middle;
padding: .5rem 0;
/* margin: 8px; */
font-size: .9rem;
border-radius: 24px;
width: 33.33%;
text-align: center;
cursor:pointer;
flex: 0 0 calc(33.33% - .75rem);
}
.provicesCity .citypop span em{
font-style: normal;
color: #9d9d9d;
font-size: .75rem;
padding-left: 5px;
}
.provicesCity .citypop span:hover,.provicesCity .citypop span:hover em{
background:var(--primary-color);color:#fff;
}
@media (max-width: 768px) {
.provices{display:none;}
}