95 lines
1.7 KiB
Vue
95 lines
1.7 KiB
Vue
<template>
|
|
<view>
|
|
<view class="u-flex u-p-b-28 item" :class="{'active':active==index}" v-for="(item,index) in list" :key="index">
|
|
<view class="left ">
|
|
<view class="circle"></view>
|
|
<view class="left-line" :class="{hide:index==list.length-1}"></view>
|
|
</view>
|
|
<view class="u-p-l-12 ">
|
|
<view class="u-font-20">{{formatTitle(item[titleKey]||'') }}</view>
|
|
<view class="u-font-24 u-m-t-2">{{item[contentKey]||''}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import dayjs from 'dayjs';
|
|
const props = defineProps({
|
|
active: {
|
|
type: [String, Number],
|
|
default: 0
|
|
},
|
|
list: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
titleKey: {
|
|
type: String,
|
|
default: 'title'
|
|
},
|
|
contentKey: {
|
|
type: String,
|
|
default: 'content'
|
|
}
|
|
})
|
|
|
|
function formatTitle(time){
|
|
return dayjs(time).format('YYYY-M-D HH:MM:ss')
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
$leftWidth: 12rpx;
|
|
$circleSize: 12rpx;
|
|
$lineWidth: 2rpx;
|
|
$circleLeft:0;
|
|
$lineLeft: calc($circleSize / 2 - $lineWidth / 2 );
|
|
|
|
.item {
|
|
color: #999;
|
|
position: relative;
|
|
|
|
.left {
|
|
height: 100%;
|
|
width: $leftWidth;
|
|
}
|
|
|
|
&.active {
|
|
color: $my-main-color;
|
|
|
|
.circle {
|
|
background: $my-main-color;
|
|
}
|
|
|
|
.left-line {
|
|
background-color: $my-main-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.circle {
|
|
position: absolute;
|
|
top: 6rpx;
|
|
left: $circleLeft;
|
|
width: $circleSize;
|
|
height: $circleSize;
|
|
border-radius: 50%;
|
|
background: #999;
|
|
margin: auto;
|
|
}
|
|
|
|
.left-line {
|
|
left: $lineLeft;
|
|
position: absolute;
|
|
bottom: 4rpx;
|
|
top: calc($circleSize + 10rpx);
|
|
width: $lineWidth;
|
|
background-color: #999;
|
|
border-radius: $lineWidth;
|
|
}
|
|
|
|
.hide {
|
|
opacity: 0;
|
|
}
|
|
</style> |