视频中心ui提交
parent
84afab46e7
commit
96c9855815
|
|
@ -16,38 +16,20 @@
|
|||
|
||||
<!-- 日期标题 + 分类筛选（靠右） -->
|
||||
<view class="filter-bar">
|
||||
<text class="date-title">03-26</text>
|
||||
<text class="date-title">
|
||||
<uni-dateformat :date="Date.now()" format="MM-dd" />
|
||||
</text>
|
||||
<view class="category-tabs">
|
||||
<view
|
||||
v-for="(item, index) in categoryList"
|
||||
:key="index"
|
||||
class="category-item"
|
||||
:class="{ active: activeCategory === 'person' }"
|
||||
@click="handleCategoryClick('person')"
|
||||
:class="{ active: activeCategory === item.type,
|
||||
'filter-btn': item.type === 'filter' }"
|
||||
@click="handleCategoryClick(item.type)"
|
||||
>
|
||||
<text class="icon">👤</text>
|
||||
<text>人</text>
|
||||
</view>
|
||||
<view
|
||||
class="category-item"
|
||||
:class="{ active: activeCategory === 'car' }"
|
||||
@click="handleCategoryClick('car')"
|
||||
>
|
||||
<text class="icon">🚗</text>
|
||||
<text>车</text>
|
||||
</view>
|
||||
<view
|
||||
class="category-item"
|
||||
:class="{ active: activeCategory === 'animal' }"
|
||||
@click="handleCategoryClick('animal')"
|
||||
>
|
||||
<text class="icon">🐾</text>
|
||||
<text>动物</text>
|
||||
</view>
|
||||
<view
|
||||
class="category-item filter-btn"
|
||||
@click="handleFilterClick"
|
||||
>
|
||||
<text class="icon">🔍</text>
|
||||
<text>筛选</text>
|
||||
<image class="icon" :src="item.imgUrl" mode="aspectFill"/>
|
||||
<text>{{ item.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -62,7 +44,7 @@
|
|||
<!-- 时间轴（uni-icons实现） -->
|
||||
<view class="time-axis">
|
||||
<uni-icons type="circle" size="14" color="#1677ff"></uni-icons>
|
||||
<view class="axis-line" v-if="index !== videoList.length - 1"></view>
|
||||
<view class="axis-line" v-if="index !== videoList.length"></view>
|
||||
</view>
|
||||
|
||||
<!-- 时间 + 卡片 垂直排列 -->
|
||||
|
|
@ -88,6 +70,8 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import {parseTime} from "@/utils/agri";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -101,6 +85,12 @@ export default {
|
|||
{ week: '四', day: '今', active: true }
|
||||
],
|
||||
activeCategory: 'person',
|
||||
categoryList: [
|
||||
{ type: 'person', name: '人', imgUrl: "https://picsum.photos/id/1015/400/200" },
|
||||
{ type: 'car', name: '车', imgUrl: "https://picsum.photos/id/1015/400/200" },
|
||||
{ type: 'animal', name: '动物', imgUrl: "https://picsum.photos/id/1015/400/200" },
|
||||
{ type: 'filter', name: '筛选', imgUrl: "https://picsum.photos/id/1015/400/200" }
|
||||
],
|
||||
videoList: [
|
||||
{
|
||||
time: '13:22:04',
|
||||
|
|
@ -111,7 +101,7 @@ export default {
|
|||
},
|
||||
{
|
||||
time: '13:20:20',
|
||||
device: 'DS-2DE4423DW-D/GLT/...',
|
||||
device: 'DS-2DE4423DW-D/G我饿全额钱31313122LT/...',
|
||||
event: '画面变化',
|
||||
cover: 'https://picsum.photos/id/1015/400/200',
|
||||
unread: true
|
||||
|
|
@ -134,11 +124,16 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
parseTime,
|
||||
handleDateClick(item) {
|
||||
this.dateList = this.dateList.map(d => ({ ...d, active: d === item }))
|
||||
},
|
||||
handleCategoryClick(type) {
|
||||
this.activeCategory = type
|
||||
if (type === 'filter') {
|
||||
this.handleFilterClick();
|
||||
return;
|
||||
}
|
||||
this.activeCategory = type;
|
||||
uni.showToast({ title: `切换到${type === 'person' ? '人' : type === 'car' ? '车' : '动物'}分类` })
|
||||
},
|
||||
handleFilterClick() {
|
||||
|
|
@ -170,10 +165,11 @@ export default {
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #666;
|
||||
background: #f7f8fd;
|
||||
margin: 0 10rpx;
|
||||
border: 1rpx solid #e0e0e0;
|
||||
//border: 1rpx solid #e0e0e0;
|
||||
border-radius: 12rpx;
|
||||
padding: 10rpx 0;
|
||||
padding: 16rpx 0;
|
||||
}
|
||||
.date-tab.active {
|
||||
background-color: #1677ff;
|
||||
|
|
@ -181,11 +177,12 @@ export default {
|
|||
border-color: #1677ff;
|
||||
}
|
||||
.week {
|
||||
font-size: 28rpx;
|
||||
font-size: 25rpx;
|
||||
margin-bottom: 8rpx;
|
||||
color: #bdbdbd;
|
||||
}
|
||||
.day {
|
||||
font-size: 32rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
|
@ -198,7 +195,7 @@ export default {
|
|||
}
|
||||
.date-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 500;
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
}
|
||||
.category-tabs {
|
||||
|
|
@ -236,6 +233,8 @@ export default {
|
|||
}
|
||||
.icon {
|
||||
margin-right: 6rpx;
|
||||
width: 16rpx;
|
||||
height: 22rpx;
|
||||
}
|
||||
|
||||
/* 视频列表 */
|
||||
|
|
@ -254,12 +253,12 @@ export default {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-right: 20rpx;
|
||||
padding-top: 8rpx;
|
||||
margin-right: 14rpx;
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
.axis-line {
|
||||
width: 1rpx;
|
||||
height: 120rpx; /* 适配时间+卡片高度 */
|
||||
height: 170rpx; /* 适配时间+卡片高度 */
|
||||
background-color: #e0e0e0;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
|
@ -280,7 +279,7 @@ export default {
|
|||
.time-text {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.unread-dot {
|
||||
width: 12rpx;
|
||||
|
|
@ -293,7 +292,7 @@ export default {
|
|||
/* 视频卡片 */
|
||||
.video-card {
|
||||
display: flex;
|
||||
background-color: #f9f9f9;
|
||||
background-color: #f7f8fd;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
|
@ -302,14 +301,19 @@ export default {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 0;
|
||||
}
|
||||
.device-name {
|
||||
font-size: 30rpx;
|
||||
color: #666;
|
||||
font-size: 28rpx;
|
||||
color: #8f8f8f;
|
||||
margin-bottom: 10rpx;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
.event-type {
|
||||
font-size: 32rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue