.friend-moments-container { | |
margin: 0 auto; | |
background: #333; | |
padding-bottom: 40px; | |
} | |
.fm-header { | |
display: flex; | |
justify-content: space-between; | |
align-items: center; | |
padding: 2%; | |
} | |
.f-search-bar { | |
display: flex; | |
align-items: center; | |
gap: 5px; | |
} | |
.search-input { | |
padding: 6px 8px; | |
font-size: 14px; | |
border: 1px solid #ccc; | |
border-radius: 4px; | |
} | |
.search-btn { | |
padding: 6px 12px; | |
font-size: 14px; | |
cursor: pointer; | |
background: #fff; | |
border: 1px solid #ccc; | |
border-radius: 4px; | |
} | |
.feed-list .feed-item { | |
padding: 1% 1.5%; | |
margin: 1% 2%; | |
border-radius: 6px; | |
/*设置item之间的间隔*/ | |
margin-bottom: 2%; | |
background-color: #e9ded2; | |
} | |
.feed-item h4 { | |
margin: 0 0 5px; | |
} | |
.feed-item p { | |
margin: 0 0 10px; | |
line-height: 1.4; | |
} | |
.feed-images { | |
display: flex; | |
flex-wrap: wrap; | |
gap: 6px; | |
margin-bottom: 10px; | |
} | |
.feed-images img { | |
width: 100px; | |
height: 100px; | |
object-fit: cover; | |
border-radius: 4px; | |
border: 1px solid #ddd; | |
} | |
.feed-footer { | |
display: flex; | |
justify-content: space-between; | |
align-items: center; | |
font-size: 12px; | |
color: #666; | |
} | |
.delete-btn { | |
background: none; | |
border: none; | |
color: #f44; | |
cursor: pointer; | |
font-size: 12px; | |
} | |
/* Modal 样式 */ | |
.modal-overlay { | |
position: fixed; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
background: rgba(0,0,0,0.5); | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
z-index: 1000; | |
} | |
.modal-dialog { | |
background: #e9ded2; | |
padding: 20px; | |
width: 35%; | |
border-radius: 8px; | |
display: flex; | |
flex-direction: column; | |
gap: 20px; | |
} | |
/* 标题 */ | |
.modal-dialog h3 { | |
margin: 0; | |
color : #4A3B34; | |
} | |
.modal-dialog input[type="text"], | |
.modal-dialog textarea { | |
width: 97%; | |
padding: 8px; | |
font-size: 14px; | |
border: 1px solid #ccc; | |
border-radius: 4px; | |
} | |
.modal-dialog input[type="file"] { | |
width: 97%; | |
font-size: 14px; | |
border-radius: 4px; | |
} | |
.modal-dialog textarea { | |
resize: vertical; | |
min-height: 80px; | |
} | |
.cf-preview { | |
display: flex; | |
flex-wrap: wrap; | |
gap: 8px; | |
} | |
.cf-preview img { | |
width: 80px; | |
height: 80px; | |
object-fit: cover; | |
border-radius: 4px; | |
border: 1px solid #bbb; | |
} | |
.modal-actions { | |
display: flex; | |
justify-content: flex-end; | |
margin-top: 10px; | |
} | |
.modal-actions .btn { | |
padding: 6px 12px; | |
font-size: 14px; | |
cursor: pointer; | |
border: none; | |
border-radius: 4px; | |
} | |
.modal-actions .btn.cancel { | |
background: #5F4437; | |
} | |
.modal-actions .btn.submit { | |
background: #BA929A; | |
color: #fff; | |
} |