init
This commit is contained in:
MoreStrive
@@ -0,0 +1,156 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{}>();
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="player">
|
||||
<div class="player__track">
|
||||
<input class="player__track-range" type="range" disabled />
|
||||
<div class="player__time">
|
||||
<span class="player__time-current">00:00</span>
|
||||
<span class="player__time-duration">00:00</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="player__controls">
|
||||
<div class="player__speed">
|
||||
<button class="player__speed-button">
|
||||
<span class="player__speed-label">Tốc độ phát</span>
|
||||
<span class="player__speed-value">1.0x</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="player__actions">
|
||||
<button class="player__actions-button player__actions-button--replay">
|
||||
<Icon name="ri:replay-5-fill" class="player__icon player__icon--replay" />
|
||||
</button>
|
||||
<button class="player__actions-button player__actions-button--pause">
|
||||
<Icon name="ri:play-circle-fill" class="player__icon player__icon--pause" />
|
||||
</button>
|
||||
<button class="player__actions-button player__actions-button--forward">
|
||||
<Icon name="ri:forward-5-line" class="player__icon player__icon--forward" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="player__volume">
|
||||
<button class="player__volume-button">
|
||||
<div class="player__volume-control">
|
||||
<Icon name="ri:volume-up-fill" class="player__icon player__icon--volume" />
|
||||
<input class="player__volume-range" type="range" disabled />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.player {
|
||||
&__track {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__track-range {
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
accent-color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__time {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 1rem;
|
||||
|
||||
&-current,
|
||||
&-duration {
|
||||
font-size: 10px;
|
||||
font-family: 'Raleway', sans-serif;
|
||||
font-weight: normal;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&__controls {
|
||||
width: 100%;
|
||||
padding: 0 1rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
& > div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
&__speed {
|
||||
&-button {
|
||||
color: #fff;
|
||||
background-color: transparent;
|
||||
font-size: 0.75rem;
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
|
||||
&-value {
|
||||
font-weight: bold;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__actions {
|
||||
&-button {
|
||||
background-color: transparent;
|
||||
padding: 0.5rem;
|
||||
border-radius: 100%;
|
||||
color: white;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
&--replay:hover,
|
||||
&--forward:hover {
|
||||
background-color: #d6d3d1;
|
||||
}
|
||||
}
|
||||
}
|
||||
&__icon {
|
||||
&--replay,
|
||||
&--forward,
|
||||
&--pause {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
&--pause {
|
||||
font-size: 44px;
|
||||
}
|
||||
}
|
||||
&__volume {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&-button {
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
|
||||
& .player__icon--volume {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
& .player__volume-range {
|
||||
accent-color: #fff;
|
||||
width: 3rem;
|
||||
height: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
button{
|
||||
border: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,191 @@
|
||||
<script setup lang="ts">
|
||||
import AudioPlayer from './AudioPlayer.vue'
|
||||
</script>
|
||||
<template>
|
||||
<div class="banner">
|
||||
<div class="banner__background" style="background-image: url('https://acp-api.vpress.vn/Resources/%E1%BA%A2nh/0bf02739-de1e-4899-9a2e-287c5d949250.jpg')">
|
||||
<div class="banner__overlay"></div>
|
||||
<Wrap class="banner__content">
|
||||
<div class="banner__inner">
|
||||
<div class="article">
|
||||
<div class="article__image-container">
|
||||
<div class="article__image-wrapper" style="background-image: url('https://acp-api.vpress.vn/Resources/%E1%BA%A2nh/0bf02739-de1e-4899-9a2e-287c5d949250.jpg')">
|
||||
<img src="https://acp-api.vpress.vn/Resources/%E1%BA%A2nh/0bf02739-de1e-4899-9a2e-287c5d949250.jpg" alt="" class="article__image" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="article__content">
|
||||
<div class="article__header">
|
||||
<div class="article__header-text">
|
||||
<h1 class="article__title">Podcast Truyện ngắn: Như cơi đựng trầu</h1>
|
||||
<time class="article__date">T2, 29 Th01 2024 16:57</time>
|
||||
</div>
|
||||
</div>
|
||||
<div class="article__intro">
|
||||
<div class="article__intro-text">Tình cảm vợ chồng êm ấm 12 năm, tối nay được định đoạt bằng tờ giấy vô hồn, vốn là người dễ xúc động nên trong lúc viết, Ngân Thương để mấy giọt nước mắt rơi xuống làm đôi chỗ bị nhòe đi.</div>
|
||||
</div>
|
||||
<div class="article__audio">
|
||||
<AudioPlayer />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Wrap>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
.banner {
|
||||
&__background {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
background-size: cover;
|
||||
@media (min-width: 768px) {
|
||||
height: 25rem;
|
||||
}
|
||||
|
||||
position: relative;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-color: black;
|
||||
opacity: 0.8;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__inner {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 2;
|
||||
.article {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(10, 1fr);
|
||||
width: 100%;
|
||||
|
||||
&__image-container {
|
||||
grid-column: span 3;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 15rem;
|
||||
min-width: 100px;
|
||||
@media (min-width: 768px) {
|
||||
height: 20rem;
|
||||
margin: 0 2rem;
|
||||
}
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
|
||||
&__image-wrapper {
|
||||
height: 10rem;
|
||||
@media (min-width: 768px) {
|
||||
height: 15rem;
|
||||
}
|
||||
width: 100%;
|
||||
border-radius: 1.5rem 0 0 1.5rem;
|
||||
padding: 0.5rem;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background-size: cover;
|
||||
z-index: 1;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: #000;
|
||||
opacity: 0.3;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
&__image {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
height: 10rem;
|
||||
@media (min-width: 768px) {
|
||||
height: 15rem;
|
||||
}
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
&__content {
|
||||
grid-column: span 7;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__header {
|
||||
grid-column: span 12;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
margin-top: 2rem;
|
||||
|
||||
&-text {
|
||||
grid-column: span 11;
|
||||
}
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 19px;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
font-family: "SFD";
|
||||
}
|
||||
|
||||
&__date {
|
||||
margin-top: 0.125rem;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&__intro {
|
||||
grid-column: span 12;
|
||||
margin-bottom: 1rem;
|
||||
display: none;
|
||||
@media (min-width: 768px) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&__intro-text {
|
||||
text-align: left;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
font-family: "SFD";
|
||||
}
|
||||
|
||||
&__audio {
|
||||
grid-column: span 10;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<article class="article">
|
||||
<div id="article-detail" class="article__detail">
|
||||
<div>
|
||||
<video controls="controls" width="100%" height="auto" data-file-id="149" data-resource="https://acp-api.vpress.vn/Resources/Video/983d2f57-7743-472f-b22d-fc73085af6d5.mp4" data-title="Download.mp4">
|
||||
<source src="https://acp-api.vpress.vn/Resources/Video/983d2f57-7743-472f-b22d-fc73085af6d5.mp4" type="video/mp4" />
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
<div class="article__sidebar">
|
||||
<div class="article__sidebar-content">
|
||||
<h1 class="article__title">Tranh cãi chuyện 'quán không nhận chuyển khoản'</h1>
|
||||
<div class="article__author-info">
|
||||
<div class="article__author">
|
||||
<p class="article__author-name">Thanh Huệ</p>
|
||||
</div>
|
||||
<span class="article__separator">-</span>
|
||||
<p class="article__date">T4, 15 Th05 2024 10:55</p>
|
||||
</div>
|
||||
<div id="article-brief" class="article__brief">
|
||||
<div class="article__intro-text">Những ngày cận Tết tại Hà Nội, các hội thi hoa đào, quất cảnh với đa dạng các sản phẩm độc đáo, bắt mắt đ đuợc các nghệ nhân đem đến cho khách tham quan chiêm ngưỡng.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
.article {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
/* flex-direction: column; */
|
||||
gap: 1rem; // Equivalent to gap-4
|
||||
margin-top: 1rem; // Equivalent to mt-4
|
||||
background-color: #f7f7f7;
|
||||
|
||||
&__detail {
|
||||
flex: 1;
|
||||
|
||||
iframe,
|
||||
video {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
&.iframe {
|
||||
max-height: 13rem; // Equivalent to max-h-52
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__sidebar {
|
||||
width: 50%;
|
||||
&-content {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 17px; // Equivalent to text-2xl
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&__author-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
video {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user