Commit f21ea918 authored by caoxu's avatar caoxu

Enhance: 城市介绍限制三行并添加更多按钮

parent e54cda4e
Pipeline #515 canceled with stages
...@@ -21,9 +21,9 @@ ...@@ -21,9 +21,9 @@
<p> <p>
欢迎来到这座充满魅力的城市!这里融合了古老的历史文化与现代都市的繁华, 欢迎来到这座充满魅力的城市!这里融合了古老的历史文化与现代都市的繁华,
每一个角落都散发着独特的魅力。漫步在古老的街道上,感受历史的沉淀; 每一个角落都散发着独特的魅力。漫步在古老的街道上,感受历史的沉淀;
探索现代化的建筑群,体验都市的活力。无论是历史文化爱好者, 探索现代化的建筑群,体验都市的活力。
还是美食探索者,都能在这里找到属于自己的精彩。
</p> </p>
<button class="more-btn" @click="showMoreInfo">更多</button>
</div> </div>
</div> </div>
...@@ -325,6 +325,10 @@ const followUser = (user) => { ...@@ -325,6 +325,10 @@ const followUser = (user) => {
const sendMessage = (user) => { const sendMessage = (user) => {
console.log('发送消息给:', user.name) console.log('发送消息给:', user.name)
} }
const showMoreInfo = () => {
console.log('查看更多城市介绍')
}
</script> </script>
<style scoped> <style scoped>
...@@ -442,6 +446,27 @@ const sendMessage = (user) => { ...@@ -442,6 +446,27 @@ const sendMessage = (user) => {
line-height: 1.8; line-height: 1.8;
color: #666; color: #666;
margin: 0; margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.more-btn {
background: none;
border: none;
color: #42b883;
font-size: 14px;
font-weight: 600;
cursor: pointer;
padding: 8px 0;
margin-top: 12px;
transition: all 0.3s ease;
}
.more-btn:hover {
color: #2196f3;
text-decoration: underline;
} }
.attractions-grid { .attractions-grid {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment