356 lines
9.8 KiB
Vue
356 lines
9.8 KiB
Vue
<template>
|
|
<div class="demo productPrices" style="height: 90%">
|
|
<div class="box">
|
|
<div class="label">
|
|
<div>产品名称</div>
|
|
<div>产品批次号</div>
|
|
<div>产品规格</div>
|
|
<div>产品类型</div>
|
|
</div>
|
|
<vue3ScrollSeamless class="list" :class-options="classOptions" :data-list="list">
|
|
<ul class="case-info">
|
|
<li v-for="(item, index) in list" :key="index" @click="handleInfo(item)">
|
|
<div>{{ item.productName }}</div>
|
|
<div>{{ item.productCode }}</div>
|
|
<div>{{ item.specs }}</div>
|
|
<div>{{ item.productType }}</div>
|
|
</li>
|
|
</ul>
|
|
</vue3ScrollSeamless>
|
|
</div>
|
|
</div>
|
|
<section class="line_info" :style="{ '--top': info.show ? '18vh' : '140vh' }">
|
|
<i class="el-icon-close" @click="handleCloseInfo"></i>
|
|
<section>
|
|
<div class="traceability_info">
|
|
<div class="_label" style="font-size: 30px">溯源信息</div>
|
|
<div class="traceability_info_box">
|
|
<div class="traceability_info_box_image">
|
|
<img style="width: 100%; height: 100%" src="../../../assets/images/entities/tomatoImg.png" />
|
|
</div>
|
|
<div class="traceability_info_box_title">
|
|
<div class="traceability_info_right">新鲜番茄</div>
|
|
<div class="traceability_info_right_bottom">检测通过</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="detection_text">权威检测</div>
|
|
<section class="info_box">
|
|
<div v-for="item in list1" :key="item.name">
|
|
<span class="_label">{{ item.title }}</span>
|
|
<span>{{ item.name }}</span>
|
|
</div>
|
|
</section>
|
|
<section class="route_box">
|
|
<!-- <div v-for="(item, i) in info.info && info.info.route" :key="`route_${i}`" class="route_item">
|
|
<div class="_circle"></div>
|
|
<div class="_name">{{ item.name }}</div>
|
|
<div class="_time">{{ item.time }}</div>
|
|
</div> -->
|
|
<div style="text-align: center">
|
|
<img src="../../../assets/images/trace/testReport.png" style="width: 100%" />
|
|
<!-- <div>检测报告</div> -->
|
|
</div>
|
|
</section>
|
|
<div class="detection_text">产地信息</div>
|
|
<div class="traceability_info">
|
|
<div class="traceability_info_box" style="flex-direction: column">
|
|
<div class="traceability_info_box_images">
|
|
<img style="width: 100%; height: 100%" src="../../../assets/images/trace/maprl.png" />
|
|
</div>
|
|
<div class="traceability_info_box_titles">
|
|
<div class="traceability_info_rights">临沧市耿马县耿马镇</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="detection_text">仓储环节</div>
|
|
<section class="info_box">
|
|
<div v-for="item in list2" :key="item.name">
|
|
<span class="_label">{{ item.title }}</span>
|
|
<span>{{ item.name }}</span>
|
|
</div>
|
|
</section>
|
|
<div class="detection_text">物流环节</div>
|
|
<section class="info_box">
|
|
<div v-for="item in list3" :key="item.name">
|
|
<span class="_label">{{ item.title }}</span>
|
|
<span>{{ item.name }}</span>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue';
|
|
import { vue3ScrollSeamless } from 'vue3-scroll-seamless';
|
|
import testData from './list.json';
|
|
const props = defineProps({
|
|
// items: {
|
|
// type: Array,
|
|
// default: () => [],
|
|
// },
|
|
});
|
|
onMounted(() => {
|
|
list.value = testData.data;
|
|
});
|
|
let list = ref([]);
|
|
|
|
let list1 = ref([
|
|
{ title: '报告编号', name: 'H1212457' },
|
|
{ title: '送检单位', name: '水果综合种植基地' },
|
|
{ title: '送检日期', name: '2021-12-11' },
|
|
{ title: '送样人', name: '李宏微' },
|
|
{ title: '联系方式', name: '19876782134' },
|
|
{ title: '样品数量', name: '1000克' },
|
|
{ title: '样品名称', name: '新鲜番茄' },
|
|
{ title: '检测单位', name: '农残检测中心' },
|
|
{ title: '检测类型', name: '农残检测' },
|
|
{ title: '检测方法', name: '食品快速检测法' },
|
|
{ title: '评判标准', name: 'GB/T5009.199-2003' },
|
|
{ title: '检测结果', name: '合格' },
|
|
]);
|
|
|
|
let list2 = ref([
|
|
{ title: '仓库位置', name: '耿马县耿马村仓储站' },
|
|
{ title: '仓储数量', name: '5吨' },
|
|
{ title: '入库时间', name: '2021-12-11' },
|
|
{ title: '仓库类型', name: '冷藏仓库' },
|
|
{ title: '批次编号', name: 'AP20211212001' },
|
|
{ title: '出库时间', name: '2021-12-15' },
|
|
]);
|
|
|
|
let list3 = ref([
|
|
{ title: '运输批次', name: '第一批次' },
|
|
{ title: '运输工具', name: '冷藏车' },
|
|
{ title: '运输路线', name: '耿马县一昆明市' },
|
|
{ title: '运输数量', name: '4吨' },
|
|
{ title: '运输时间', name: '2021-12-15 5:30~12-16 8:30' },
|
|
{ title: '', name: '' },
|
|
{ title: '运输批次', name: '第二批次' },
|
|
{ title: '运输工具', name: '小型运载卡车' },
|
|
{ title: '运输路线', name: '耿马县一四排乡' },
|
|
{ title: '运输数量', name: '1吨' },
|
|
{ title: '运输时间', name: '2021-12-15 5:30~12-16 7:30' },
|
|
]);
|
|
|
|
const classOptions = {
|
|
singleHeight: 48,
|
|
};
|
|
const info = ref({
|
|
show: false,
|
|
});
|
|
function handleInfo(item) {
|
|
info.value = Object.assign({ show: true }, item);
|
|
}
|
|
function handleCloseInfo() {
|
|
info.value = { show: false };
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.productPrices {
|
|
.box {
|
|
height: 100%;
|
|
.label {
|
|
display: grid;
|
|
grid-template-columns: 25% 40% 18% 17%;
|
|
background-color: rgba(70, 109, 109, 0.8);
|
|
color: #ffffff;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
border-radius: 4px;
|
|
padding-left: 20px;
|
|
box-sizing: border-box;
|
|
div {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
&:nth-of-type(1) {
|
|
flex: 1.5;
|
|
}
|
|
}
|
|
}
|
|
.list {
|
|
height: calc(100% - 30px);
|
|
overflow: hidden;
|
|
.case-info {
|
|
color: #fff;
|
|
padding: 0;
|
|
margin: 0;
|
|
padding-left: 20px;
|
|
box-sizing: border-box;
|
|
li {
|
|
display: grid;
|
|
grid-template-columns: 25% 40% 18% 17%;
|
|
height: 34px;
|
|
line-height: 34px;
|
|
cursor: pointer;
|
|
div {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
font-size: 14px;
|
|
color: #35d0c0;
|
|
// pointer-events: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.line_info {
|
|
position: fixed;
|
|
padding: 24px 10px 16px 16px;
|
|
right: 30%;
|
|
top: var(--top);
|
|
max-height: 85vh;
|
|
width: 400px;
|
|
color: #fff;
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
border: 2px solid #01fefd;
|
|
border-radius: 16px;
|
|
backdrop-filter: blur(4px);
|
|
z-index: 9999;
|
|
transition: all 0.8s cubic-bezier(0.58, 0.15, 0.4, 1.42);
|
|
font-size: 18px;
|
|
.detection_text {
|
|
font-size: 25px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.traceability_info {
|
|
.traceability_info_box {
|
|
justify-content: space-evenly;
|
|
padding: 10px;
|
|
display: flex;
|
|
margin: 20px 0px;
|
|
background-color: rgba(70, 109, 109, 0.8);
|
|
border-radius: 10px;
|
|
.traceability_info_box_image {
|
|
width: 130px;
|
|
height: 75px;
|
|
}
|
|
.traceability_info_box_images {
|
|
width: 100%;
|
|
height: 150px;
|
|
}
|
|
|
|
.traceability_info_box_title {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
height: 75px;
|
|
}
|
|
.traceability_info_box_titles {
|
|
margin-top: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-evenly;
|
|
align-items: start;
|
|
}
|
|
.traceability_info_right {
|
|
font-size: 23px;
|
|
color: #fff;
|
|
}
|
|
.traceability_info_rights {
|
|
font-size: 15px;
|
|
color: #fff;
|
|
}
|
|
.traceability_info_right_bottom {
|
|
padding: 5px 20px;
|
|
border-radius: 40px;
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
color: #04ed8c;
|
|
font-size: 17px;
|
|
}
|
|
}
|
|
}
|
|
._label {
|
|
color: #01fefd;
|
|
}
|
|
.el-icon-close {
|
|
position: absolute;
|
|
right: -40px;
|
|
top: 0px;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
width: 30px;
|
|
height: 30px;
|
|
background-image: url(../../../assets/images/trace/delete.png);
|
|
background-size: contain;
|
|
}
|
|
> section {
|
|
padding-right: 10px;
|
|
max-height: calc(85vh - 100px);
|
|
overflow-y: auto;
|
|
&::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
&::-webkit-scrollbar-track {
|
|
background-color: #dddddd;
|
|
border-radius: 6px;
|
|
}
|
|
&::-webkit-scrollbar-thumb {
|
|
background-color: #959191;
|
|
border-radius: 6px;
|
|
}
|
|
&::-webkit-scrollbar-thumb:hover {
|
|
background-color: #a0a0a0;
|
|
}
|
|
.info_box {
|
|
> div {
|
|
margin-bottom: 12px;
|
|
display: grid;
|
|
grid-template-columns: 40% 60%;
|
|
span {
|
|
&:last-child {
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.route_box {
|
|
> div {
|
|
position: relative;
|
|
padding-bottom: 16px;
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 12px;
|
|
left: -11px;
|
|
height: 100%;
|
|
border: 1px solid #fff;
|
|
}
|
|
&:last-child {
|
|
&::after {
|
|
display: none;
|
|
}
|
|
}
|
|
> div {
|
|
position: relative;
|
|
padding-left: 12px;
|
|
}
|
|
._circle {
|
|
position: absolute;
|
|
top: 4px;
|
|
left: -16px;
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
background-color: #fff;
|
|
box-shadow: 0 0 3px #fff;
|
|
}
|
|
._name {
|
|
margin-bottom: 6px;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
font-family: '黑体';
|
|
color: #01fefd;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|