136 lines
3.6 KiB
Vue
136 lines
3.6 KiB
Vue
|
||
<template>
|
||
<article class="news-item">
|
||
<div class="news-item-header" v-on:click="openWorkout(item.id)">
|
||
<h3>{{ item.name }}</h3>
|
||
<VaIcon v-if="deleteItem"
|
||
name="delete_forever"
|
||
size="22px"
|
||
color="#bbc1c3"
|
||
class="news-item-icon"
|
||
@click="(event: any) => deleteItem ? deleteItem(item.id, event) : ''"
|
||
/>
|
||
</div>
|
||
<ul class="metadata">
|
||
<li v-if="item.workouted_at"><span>Дата:</span> {{ formatTime(item.workouted_at) }}</li>
|
||
<li v-if="item.speed"><span>Скорость:</span> {{ speedConvert(item.speed) }} км/ч</li>
|
||
<li v-if="item.heart_rate"><span>Пульс:</span> {{ item.heart_rate }} уд /мин</li>
|
||
<li v-if="item.distantion"><span>Расстояние:</span> {{ distConvert(item.distantion) }} км</li>
|
||
<li v-if="item.duraion_sec"><span>Продолжительность:</span> {{ secondsToDuration(item.duraion_sec) }} </li>
|
||
<li v-if="item.cadence"><span>Каденс:</span> {{ item.cadence }} об/мин</li>
|
||
<li v-if="item.power"><span>Мощность:</span> {{ Math.round(item.power) }} Вт</li>
|
||
<li v-if="item.external_links && item.external_links.values.length > 0"><span>Ссылки:</span> <a :href="item.external_links?.values[0].value" target="_blank">Дзен</a></li>
|
||
</ul>
|
||
<div v-if="item.attachment"
|
||
class="image-container"
|
||
:style="{'background-image': `url(${item.attachment.url})` }"
|
||
v-on:click="openWorkout(item.id)"></div>
|
||
</article>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { WorkoutItem, secondsToDuration, distConvert, formatTime, speedConvert } from "../Definitions.vue";
|
||
|
||
interface Props {
|
||
item: WorkoutItem
|
||
openWorkout: (item: string) => void
|
||
deleteItem?: (item: string, event: any) => void
|
||
}
|
||
const { item, openWorkout, deleteItem } = defineProps<Props>()
|
||
|
||
</script>
|
||
<style>
|
||
.image-container {
|
||
cursor: pointer;
|
||
height: 300px;
|
||
width: 100%;
|
||
background-repeat: no-repeat;
|
||
background-size: auto;
|
||
background-position: center center;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
|
||
.image-container img {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
@media (min-width: 1300px) {
|
||
.image-container::before,
|
||
.image-container::after {
|
||
top:0;
|
||
content: "";
|
||
position: absolute;
|
||
width: 25%;
|
||
height: 300px;
|
||
background-image: inherit;
|
||
background-size: inherit;
|
||
filter: blur(10px);
|
||
}
|
||
|
||
.image-container::before {
|
||
left: 0;
|
||
}
|
||
|
||
.image-container::after {
|
||
right: 0;
|
||
}
|
||
|
||
.image-container::before {
|
||
left: 0;
|
||
background-position: left center;
|
||
}
|
||
|
||
.image-container:after {
|
||
right: 0;
|
||
background-position: right center;
|
||
}
|
||
}
|
||
.news-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 1rem;
|
||
border-radius: 10px;
|
||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
|
||
transition: transform 0.2s ease-in-out;
|
||
width: 100%;
|
||
}
|
||
|
||
.news-item-header {
|
||
cursor: pointer;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
}
|
||
.news-item-icon {
|
||
cursor: pointer;
|
||
}
|
||
|
||
|
||
.news-item h3 {
|
||
font-weight: bold;
|
||
color: #3d3d3d;
|
||
}
|
||
|
||
.metadata {
|
||
border-top: #9c9a9a 1px solid;
|
||
}
|
||
|
||
.metadata li {
|
||
list-style: none;
|
||
display: inline-block;
|
||
margin-left: 1rem;
|
||
}
|
||
|
||
.metadata span {
|
||
font-size: 0.9em;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
</style>
|
||
|