lenghui
7 months ago
1 changed files with 271 additions and 5 deletions
@ -1,10 +1,276 @@ |
|||||
<script setup> |
|
||||
|
<template> |
||||
|
<!-- 卡片 --> |
||||
|
<div class="card-container"> |
||||
|
<div class="card"> |
||||
|
<div class="cover-image" style="position:relative;"> |
||||
|
<img src="例图.jpg" alt="节目1"> |
||||
|
<div |
||||
|
style="position:absolute; z-index:2;text-align:center;top:30%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:18px;"> |
||||
|
即将开播</div> |
||||
|
<div |
||||
|
style="position:absolute; z-index:2;text-align:center;top:60%;left:50%;transform:translate(-50%,-50%);color:#ffffffaf;font-size:15px;"> |
||||
|
明天09:55开播</div> |
||||
|
</div> |
||||
|
<div class="card-content"> |
||||
|
<div class="card-title">猎庄之顶级波段猎庄之顶级波段猎庄之顶级波段猎庄之顶级波段</div> |
||||
|
<div class="card-actions"> <!-- 新增的容器类用于动作 --> |
||||
|
<!-- 用户头像 --> |
||||
|
<img src="例图.jpg" alt="节目1" class="user-avatar" |
||||
|
style="border-radius: 50%; width: 20px; height: 20px;"> |
||||
|
<!-- 用户昵称，与头像同行显示 --> |
||||
|
<div class="card-info">用户昵称用户昵称用户昵称用户昵称</div> |
||||
|
<!-- 预约按钮 --> |
||||
|
<a href="#" class="card-button">预约</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
</script> |
|
||||
|
<!-- 卡片 --> |
||||
|
<div class="card-container"> |
||||
|
<div class="card"> |
||||
|
<div class="cover-image" style="position:relative;"> |
||||
|
<img src="例图.jpg" alt="节目1"> |
||||
|
<div |
||||
|
style="position:absolute; z-index:2;text-align:center;top:30%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:18px;"> |
||||
|
即将开播</div> |
||||
|
<div |
||||
|
style="position:absolute; z-index:2;text-align:center;top:60%;left:50%;transform:translate(-50%,-50%);color:#ffffffaf;font-size:15px;"> |
||||
|
明天09:55开播</div> |
||||
|
</div> |
||||
|
<div class="card-content"> |
||||
|
<div class="card-title">猎庄之顶级波段猎庄之顶级波段猎庄之顶级波段猎庄之顶级波段</div> |
||||
|
<div class="card-actions"> <!-- 新增的容器类用于动作 --> |
||||
|
<!-- 用户头像 --> |
||||
|
<img src="例图.jpg" alt="节目1" class="user-avatar" |
||||
|
style="border-radius: 50%; width: 20px; height: 20px;"> |
||||
|
<!-- 用户昵称，与头像同行显示 --> |
||||
|
<div class="card-info">用户昵称用户昵称用户昵称用户昵称</div> |
||||
|
<!-- 预约按钮 --> |
||||
|
<a href="#" class="card-button">预约</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 卡片 --> |
||||
|
<div class="card-container"> |
||||
|
<div class="card"> |
||||
|
<div class="cover-image" style="position:relative;"> |
||||
|
<img src="例图.jpg" alt="节目1"> |
||||
|
<div |
||||
|
style="position:absolute; z-index:2;text-align:center;top:30%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:18px;"> |
||||
|
即将开播</div> |
||||
|
<div |
||||
|
style="position:absolute; z-index:2;text-align:center;top:60%;left:50%;transform:translate(-50%,-50%);color:#ffffffaf;font-size:15px;"> |
||||
|
明天09:55开播</div> |
||||
|
</div> |
||||
|
<div class="card-content"> |
||||
|
<div class="card-title">猎庄之顶级波段猎庄之顶级波段猎庄之顶级波段猎庄之顶级波段</div> |
||||
|
<div class="card-actions"> <!-- 新增的容器类用于动作 --> |
||||
|
<!-- 用户头像 --> |
||||
|
<img src="例图.jpg" alt="节目1" class="user-avatar" |
||||
|
style="border-radius: 50%; width: 20px; height: 20px;"> |
||||
|
<!-- 用户昵称，与头像同行显示 --> |
||||
|
<div class="card-info">用户昵称用户昵称用户昵称用户昵称</div> |
||||
|
<!-- 预约按钮 --> |
||||
|
<a href="#" class="card-button">预约</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 卡片 --> |
||||
|
<div class="card-container"> |
||||
|
<div class="card"> |
||||
|
<div class="cover-image" style="position:relative;"> |
||||
|
<img src="例图.jpg" alt="节目1"> |
||||
|
<div |
||||
|
style="position:absolute; z-index:2;text-align:center;top:30%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:18px;"> |
||||
|
即将开播</div> |
||||
|
<div |
||||
|
style="position:absolute; z-index:2;text-align:center;top:60%;left:50%;transform:translate(-50%,-50%);color:#ffffffaf;font-size:15px;"> |
||||
|
明天09:55开播</div> |
||||
|
</div> |
||||
|
<div class="card-content"> |
||||
|
<div class="card-title">猎庄之顶级波段猎庄之顶级波段猎庄之顶级波段猎庄之顶级波段</div> |
||||
|
<div class="card-actions"> <!-- 新增的容器类用于动作 --> |
||||
|
<!-- 用户头像 --> |
||||
|
<img src="例图.jpg" alt="节目1" class="user-avatar" |
||||
|
style="border-radius: 50%; width: 20px; height: 20px;"> |
||||
|
<!-- 用户昵称，与头像同行显示 --> |
||||
|
<div class="card-info">用户昵称用户昵称用户昵称用户昵称</div> |
||||
|
<!-- 预约按钮 --> |
||||
|
<a href="#" class="card-button">预约</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 卡片 --> |
||||
|
<div class="card-container"> |
||||
|
<div class="card"> |
||||
|
<div class="cover-image" style="position:relative;"> |
||||
|
<img src="例图.jpg" alt="节目1"> |
||||
|
<div |
||||
|
style="position:absolute; z-index:2;text-align:center;top:30%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:18px;"> |
||||
|
即将开播</div> |
||||
|
<div |
||||
|
style="position:absolute; z-index:2;text-align:center;top:60%;left:50%;transform:translate(-50%,-50%);color:#ffffffaf;font-size:15px;"> |
||||
|
明天09:55开播</div> |
||||
|
</div> |
||||
|
<div class="card-content"> |
||||
|
<div class="card-title">猎庄之顶级波段猎庄之顶级波段猎庄之顶级波段猎庄之顶级波段</div> |
||||
|
<div class="card-actions"> <!-- 新增的容器类用于动作 --> |
||||
|
<!-- 用户头像 --> |
||||
|
<img src="例图.jpg" alt="节目1" class="user-avatar" |
||||
|
style="border-radius: 50%; width: 20px; height: 20px;"> |
||||
|
<!-- 用户昵称，与头像同行显示 --> |
||||
|
<div class="card-info">用户昵称用户昵称用户昵称用户昵称</div> |
||||
|
<!-- 预约按钮 --> |
||||
|
<a href="#" class="card-button">预约</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
<template> |
|
||||
直播 |
|
||||
</template> |
</template> |
||||
<style scoped> |
<style scoped> |
||||
|
body { |
||||
|
/*居中显示*/ |
||||
|
margin-left: auto; |
||||
|
margin-right: auto; |
||||
|
/*宽度*/ |
||||
|
width: 916px; |
||||
|
font-family: Arial, sans-serif; |
||||
|
padding: 0; |
||||
|
flex-wrap: wrap; |
||||
|
/*超出自动换行*/ |
||||
|
background-color: #f4f4f4; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
/* 垂直居中整个页面内容 */ |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.card-container { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
/*超出自动换行*/ |
||||
|
justify-content: center; |
||||
|
/* 卡片水平居中 */ |
||||
|
padding: 0px; |
||||
|
} |
||||
|
|
||||
|
.card { |
||||
|
background-color: #fff; |
||||
|
border-radius: 8px; |
||||
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); |
||||
|
margin: 10px; |
||||
|
overflow: hidden; |
||||
|
border: #666; |
||||
|
height: 190px; |
||||
|
width: 209px; |
||||
|
} |
||||
|
|
||||
|
.card img { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
/*图片占满整个卡片*/ |
||||
|
object-fit: cover; |
||||
|
border-radius: 8px; |
||||
|
} |
||||
|
|
||||
|
.cover-image { |
||||
|
position: relative; |
||||
|
height: 120px; |
||||
|
width: 208px; |
||||
|
border-radius: 8px; |
||||
|
} |
||||
|
|
||||
</style> |
|
||||
|
.cover-image::before { |
||||
|
content: " "; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 207px; |
||||
|
height: 120px; |
||||
|
/*最后一个参数是半透明度，可以透过调整0-1的数值，调整到满意的透明度*/ |
||||
|
background-color: rgba(0, 0, 0, 0.3); |
||||
|
border-radius: 8px; |
||||
|
} |
||||
|
|
||||
|
.card-content { |
||||
|
padding: 8px; |
||||
|
} |
||||
|
|
||||
|
.card-title { |
||||
|
font-size: 13px; |
||||
|
font-weight: bold; |
||||
|
margin-bottom: 5px; |
||||
|
white-space: nowrap; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.card-info { |
||||
|
font-size: 14px; |
||||
|
color: #666; |
||||
|
} |
||||
|
|
||||
|
.card-button { |
||||
|
display: inline-block; |
||||
|
padding: 5px 5px; |
||||
|
background-color: #eb8b31; |
||||
|
color: #fff; |
||||
|
text-decoration: none; |
||||
|
border-radius: 20px; |
||||
|
; |
||||
|
font-size: small; |
||||
|
width: 50px; |
||||
|
text-align: center; |
||||
|
margin-left: auto; |
||||
|
} |
||||
|
|
||||
|
.card-actions { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
/* 垂直居中对齐 */ |
||||
|
justify-content: space-between; |
||||
|
/* 按钮右对齐 */ |
||||
|
} |
||||
|
|
||||
|
.user-avatar { |
||||
|
border-radius: 50%; |
||||
|
width: 20px; |
||||
|
height: 20px; |
||||
|
} |
||||
|
|
||||
|
.card-info { |
||||
|
margin-left: 5px; |
||||
|
/* 昵称与头像之间的间距 */ |
||||
|
margin-top: 0; |
||||
|
/* 移除顶部外边距 */ |
||||
|
/*超长以后将内容省略显示*/ |
||||
|
white-space: nowrap; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
|
||||
|
width: 90px; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
|
<script setup> |
||||
|
/*点击预约按钮以后显示预约成功的提示，并将按钮变为不可点击状态，且将按钮的文字改为“已预约”，并将按钮的背景颜色改为灰色*/ |
||||
|
var buttons = document.querySelectorAll('.card-button'); |
||||
|
buttons.forEach(function (button) { |
||||
|
button.addEventListener('click', function () { |
||||
|
alert('预约成功！'); |
||||
|
button.disabled = true; |
||||
|
button.innerText = '已预约'; |
||||
|
button.style.backgroundColor = '#ccc'; |
||||
|
}); |
||||
|
}); |
||||
|
</script> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue