163 lines
3.5 KiB
Vue
163 lines
3.5 KiB
Vue
<template>
|
|
<div class="carousel">
|
|
<div class="title">
|
|
<div class="flex items-center">
|
|
<img src="@/assets/images/ligner.png" alt="" />
|
|
<div class="flex justify-between w100% items-center">
|
|
<div class="subTitle flex items-center">
|
|
<img src="@/assets/images/robot-line.png" alt="" />
|
|
<span>AI安全巡检</span>
|
|
</div>
|
|
<div class="hint">AI SAFETY INSPECTION</div>
|
|
</div>
|
|
<div class="mark"></div>
|
|
</div>
|
|
</div>
|
|
<div class="carousellist flex items-center">
|
|
<div>
|
|
<!-- <img src="@/assets/images/toleft.png" alt="" /> -->
|
|
</div>
|
|
<div class="carouselcontainer flex justify-between">
|
|
<div class="carouselItem flex flex-col justify-between" v-for="item in AIImg">
|
|
<img :src="BASE + item.picture" alt="" />
|
|
<div class="time">{{ parseTime(item.createdAt, '{m}-{d} {h}:{i}') }}</div>
|
|
<div class="remark">{{ item.describe }}</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<!-- <img src="@/assets/images/toright.png" alt="" /> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { useUserStoreHook } from '@/store/modules/user';
|
|
import { getAISafetyInspectionList } from '@/api/gis';
|
|
const AIImg = ref([]);
|
|
const BASE = 'http://58.17.134.85:7363';
|
|
const store = useUserStoreHook();
|
|
const currentProject = computed(() => store.selectedProject);
|
|
const getAIImg = async () => {
|
|
const res = await getAISafetyInspectionList({
|
|
projectId: currentProject.value.goId
|
|
});
|
|
AIImg.value = res.data.list.slice(0, 5);
|
|
};
|
|
onMounted(() => {
|
|
getAIImg();
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '../css/gis.scss';
|
|
|
|
.carousel {
|
|
width: vw(907);
|
|
height: vh(167);
|
|
background-color: rgba(8, 14, 15, 0.3);
|
|
backdrop-filter: blur(vw(4));
|
|
position: absolute;
|
|
bottom: vh(31);
|
|
left: vw(507);
|
|
padding-top: vh(10);
|
|
z-index: 2;
|
|
}
|
|
|
|
.carousellist {
|
|
margin-top: vh(16);
|
|
padding: 0 vw(23);
|
|
width: 100%;
|
|
height: vh(84);
|
|
|
|
> div > img {
|
|
width: vw(20);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.carouselcontainer {
|
|
flex: 1;
|
|
height: 100%;
|
|
margin: 0 vw(13);
|
|
|
|
.carouselItem {
|
|
font-size: vw(12);
|
|
color: #fff;
|
|
width: vw(133);
|
|
position: relative;
|
|
|
|
.time {
|
|
text-align: right;
|
|
margin-right: vw(3);
|
|
|
|
font-family: 'D-Din';
|
|
}
|
|
|
|
.remark {
|
|
text-align: center;
|
|
height: vh(21);
|
|
line-height: vh(21);
|
|
font-family: '思源黑体';
|
|
background: rgba(0, 0, 0, 0.5);
|
|
margin-right: vw(3);
|
|
}
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
object-fit: cover;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: -1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.title {
|
|
> div {
|
|
> img {
|
|
width: vw(14);
|
|
height: vh(35);
|
|
margin-right: vw(8);
|
|
}
|
|
}
|
|
|
|
.subTitle {
|
|
img {
|
|
width: vw(18.8);
|
|
margin-right: vw(10);
|
|
}
|
|
|
|
span {
|
|
text-shadow: 0 0 vw(8) rgba(2, 3, 7, 0.35);
|
|
font-size: vw(20);
|
|
font-weight: 500;
|
|
letter-spacing: 0;
|
|
color: rgba(255, 255, 255, 1);
|
|
}
|
|
}
|
|
|
|
.hint {
|
|
font-size: vw(14);
|
|
font-weight: 400;
|
|
color: rgba(204, 204, 204, 0.5);
|
|
margin-right: vw(20);
|
|
}
|
|
|
|
.mark {
|
|
width: vw(2);
|
|
height: vh(14);
|
|
background: rgba(67, 226, 203);
|
|
margin-right: vw(10);
|
|
}
|
|
|
|
.ligner {
|
|
height: vh(1);
|
|
background: linear-gradient(to right, transparent 0%, #43e2cb 90%);
|
|
margin-left: vw(14);
|
|
}
|
|
}
|
|
</style>
|