refactor: restructure css files into common and page-specific styles
This commit is contained in:
shenghuo2
287
styles/product.css
Normal file
287
styles/product.css
Normal file
@ -0,0 +1,287 @@
|
||||
/* 产品页面专用样式 */
|
||||
|
||||
/* 产品页面 */
|
||||
.product-header {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
/* 搜索框 */
|
||||
.search-section {
|
||||
padding: 20px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #e8e8e8;
|
||||
border-radius: 20px;
|
||||
padding: 12px 16px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.search-box i {
|
||||
color: #999;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.search-box input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
background: transparent;
|
||||
outline: none;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.search-box input::placeholder {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 推广卡片 */
|
||||
.promo-section {
|
||||
padding: 0 20px 20px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.promo-card {
|
||||
background: linear-gradient(135deg, #a8d8ff 0%, #e6f3ff 100%);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.promo-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.promo-badge {
|
||||
background-color: rgba(255,255,255,0.9);
|
||||
color: #333;
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
display: inline-block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.promo-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.promo-subtitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.promo-tag {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.promo-count {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.promo-image {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.camera-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background-color: rgba(255,255,255,0.3);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 排行榜 */
|
||||
.ranking-section {
|
||||
background-color: #fff;
|
||||
margin: 0 20px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.ranking-header {
|
||||
padding: 20px 20px 0;
|
||||
}
|
||||
|
||||
.ranking-header h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ranking-list {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.ranking-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px 0;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
}
|
||||
|
||||
.ranking-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.ranking-number {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #666;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.ranking-item:first-child .ranking-number {
|
||||
background-color: #ff6900;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.ranking-item:nth-child(2) .ranking-number {
|
||||
background-color: #ffa500;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.ranking-item:nth-child(3) .ranking-number {
|
||||
background-color: #ffb84d;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-right: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #f8f8f8;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.ac-product-icon {
|
||||
width: 30px;
|
||||
height: 20px;
|
||||
background-color: #666;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ac-product-icon::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.scale-icon {
|
||||
width: 35px;
|
||||
height: 25px;
|
||||
background-color: #ddd;
|
||||
border-radius: 6px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.scale-icon::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 20px;
|
||||
height: 1px;
|
||||
background-color: #999;
|
||||
}
|
||||
|
||||
.speaker-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-color: #333;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.speaker-icon::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
margin-bottom: 5px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.product-stats {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.view-all {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
border-top: 1px solid #f5f5f5;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.view-all span {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.view-all i {
|
||||
margin-left: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
Reference in New Issue
Block a user