wanglin
/
practice_VUE
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

H5静态页面

live_lh
lenghui 7 months ago
parent
afa25cb532
commit
3c735d1f4e
1 changed files with 271 additions and 5 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 276
      vueHomilyLink/src/views/LiveView.vue

276
vueHomilyLink/src/views/LiveView.vue
View File

@ -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>
<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