From 3c735d1f4e2495e003332424c58196830fc52806 Mon Sep 17 00:00:00 2001
From: lenghui <h280650@163.com>
Date: Thu, 28 Nov 2024 17:45:21 +0800
Subject: [PATCH] =?UTF-8?q?H5=E9=9D=99=E6=80=81=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vueHomilyLink/src/views/LiveView.vue | 276 ++++++++++++++++++++++++++++++++++-
 1 file changed, 271 insertions(+), 5 deletions(-)

diff --git a/vueHomilyLink/src/views/LiveView.vue b/vueHomilyLink/src/views/LiveView.vue
index f844bf2..cedf2f3 100644
--- a/vueHomilyLink/src/views/LiveView.vue
+++ b/vueHomilyLink/src/views/LiveView.vue
@@ -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>
\ No newline at end of file
+.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>
\ No newline at end of file