feat: 首页按0904UI版本更改
parent
ddfd3e8d4a
commit
dfa0eafb16
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 789 B After Width: | Height: | Size: 789 B |
|
Before Width: | Height: | Size: 334 KiB After Width: | Height: | Size: 334 KiB |
@ -0,0 +1,97 @@
|
||||
<!--
|
||||
* @Author: donghao donghao@supervision.ltd
|
||||
* @Date: 2025-06-23 15:50:30
|
||||
* @LastEditors: donghao donghao@supervision.ltd
|
||||
* @LastEditTime: 2025-09-05 16:48:36
|
||||
* @FilePath: \5G-Web\src\views\dashboard\components\TrainInfoModel.vue
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
-->
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
interface Props {
|
||||
/** 弹窗显隐 */
|
||||
value: boolean;
|
||||
info: Record<string, any>;
|
||||
image: any;
|
||||
}
|
||||
interface Emits {
|
||||
(e: "update:value", val: boolean): void;
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
value: false,
|
||||
info: {},
|
||||
image: []
|
||||
});
|
||||
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
|
||||
const show = computed({
|
||||
get() {
|
||||
return props.value;
|
||||
},
|
||||
set(val: boolean) {
|
||||
emit("update:value", val);
|
||||
}
|
||||
});
|
||||
|
||||
// 动态设置循环的数量
|
||||
const itemCount = 16; // 这里可以根据实际需求动态设置
|
||||
</script>
|
||||
<template>
|
||||
<el-dialog class="trainModal-wrap fg-dialog fg-dialog2" v-model="show" align-center :show-close="false" >
|
||||
<!-- 自定义标题栏 -->
|
||||
<template #header="{ close, titleId, titleClass }">
|
||||
<div class="flex items-center justify-between train-dialog-header fg-dialog-header">
|
||||
<div class="flex items-center justify-center header-left">
|
||||
<div class="header-icon mr-[12px]"></div>
|
||||
<p class="overflow-hidden whitespace-nowrap text-ellipsis max-w-[650px]">列车图片</p>
|
||||
</div>
|
||||
<div class="fg-dialog-header-close" @click="close">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 图片区域 -->
|
||||
<div class="train-content">
|
||||
<div class="train-content-top">
|
||||
<span class="train-content-bottom-title">列车ID:</span>
|
||||
<div class="train-content-top-img">
|
||||
<div class="train-content-top-img-box">
|
||||
<img :src="info.arrive_img_url" alt=""></img>
|
||||
</div>
|
||||
<div class="train-content-top-img-box">
|
||||
<img :src="info.leave_img_url" alt=""></img>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="train-content-bottom">
|
||||
<span class="train-content-bottom-title">列车与车厢号</span>
|
||||
<div class="flex items-center train-content-bottom-train">
|
||||
<div class="train-card-item mb-[8px] mr-[8px] flex items-center justify-center ">
|
||||
<div class="train_head_icon"></div>
|
||||
</div>
|
||||
<ul :class="['train-card-item-list', { 'high-height': info?.data?.train_data?.length > 15 }]">
|
||||
<li class="flex flex-1 train-card-item" v-for="(item, index) in info?.data?.train_data" :key="index">
|
||||
<div class="w-[80px] px-[8px] flex flex-col justify-center">
|
||||
<div>{{ item.model }}</div>
|
||||
<div>
|
||||
<!-- <span class="mr-3">04</span> -->
|
||||
<span>{{ item.carriage_number }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<style lang="scss" >
|
||||
@import url('./TrainInfoModel.scss');
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,120 @@
|
||||
.trainModal-wrap.el-dialog {
|
||||
.train-dialog-header {
|
||||
color: white;
|
||||
padding: 0;
|
||||
// padding-top: 8px;
|
||||
// margin-bottom: 20px;
|
||||
.header-left {
|
||||
padding: 0 24px;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
.header-icon {
|
||||
width: 24px;
|
||||
height: 48px;
|
||||
background-image: url("@/assets/common/sub_title_icon.png");
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.train-content {
|
||||
box-sizing: border-box;
|
||||
padding: 0 24px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.train-content-top {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
.train-content-top-img {
|
||||
box-sizing: border-box;
|
||||
padding-top: 16px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between; /* 水平方向均匀分布间距 */
|
||||
align-content: space-between; /* 垂直方向均匀分布间距 */
|
||||
|
||||
}
|
||||
img {
|
||||
width: 568px;
|
||||
height: 349px;
|
||||
}
|
||||
}
|
||||
.train-content-bottom {
|
||||
box-sizing: border-box;
|
||||
margin-top: 12px;
|
||||
|
||||
.train-content-bottom-train {
|
||||
box-sizing: border-box;
|
||||
padding-top: 16px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 82px;
|
||||
.train-card-item {
|
||||
width: 80px;
|
||||
height: 56px;
|
||||
background-image: url("@/assets/trainManage/train_card_bg.png");
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
color: #37DBFF;
|
||||
.train_head_icon{
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background-image: url("@/assets/trainManage/train_head.png");
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
.train-card-item-list,
|
||||
.high-height {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 82px;
|
||||
padding: 16px 0;
|
||||
display: flex;
|
||||
// align-items: flex-end;
|
||||
overflow-x: auto; /* 开启横向滚动 */
|
||||
white-space: nowrap; /* 防止车厢内容换行 */
|
||||
// background-color: #003366; /* 设置与背景相近颜色，这里假设深蓝色背景 */
|
||||
padding: 0; /* 去除默认内边距 */
|
||||
margin: 0; /* 去除默认外边距 */
|
||||
margin-top: 18px;
|
||||
|
||||
gap: 8px; /* 车厢之间的间距 */
|
||||
/* 自定义滚动条样式 */
|
||||
&::-webkit-scrollbar {
|
||||
height: 8px; /* 滚动条高度 */
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(255,255,255,0.6); /* 滚动条滑块颜色 */
|
||||
border-radius: 4px; /* 滑块圆角 */
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.train-content-bottom-title {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-left: 8px;
|
||||
height: 22px;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
border-left: 3px solid #46A9ED;
|
||||
line-height: 22px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,97 @@
|
||||
<!--
|
||||
* @Author: donghao donghao@supervision.ltd
|
||||
* @Date: 2025-06-23 15:50:30
|
||||
* @LastEditors: donghao donghao@supervision.ltd
|
||||
* @LastEditTime: 2025-09-05 16:48:36
|
||||
* @FilePath: \5G-Web\src\views\dashboard\components\TrainInfoModel.vue
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
-->
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
interface Props {
|
||||
/** 弹窗显隐 */
|
||||
value: boolean;
|
||||
info: Record<string, any>;
|
||||
image: any;
|
||||
}
|
||||
interface Emits {
|
||||
(e: "update:value", val: boolean): void;
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
value: false,
|
||||
info: {},
|
||||
image: []
|
||||
});
|
||||
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
|
||||
const show = computed({
|
||||
get() {
|
||||
return props.value;
|
||||
},
|
||||
set(val: boolean) {
|
||||
emit("update:value", val);
|
||||
}
|
||||
});
|
||||
|
||||
// 动态设置循环的数量
|
||||
const itemCount = 16; // 这里可以根据实际需求动态设置
|
||||
</script>
|
||||
<template>
|
||||
<el-dialog class="trainModal-wrap fg-dialog fg-dialog2" v-model="show" align-center :show-close="false" >
|
||||
<!-- 自定义标题栏 -->
|
||||
<template #header="{ close, titleId, titleClass }">
|
||||
<div class="flex items-center justify-between train-dialog-header fg-dialog-header">
|
||||
<div class="flex items-center justify-center header-left">
|
||||
<div class="header-icon mr-[12px]"></div>
|
||||
<p class="overflow-hidden whitespace-nowrap text-ellipsis max-w-[650px]">列车图片</p>
|
||||
</div>
|
||||
<div class="fg-dialog-header-close" @click="close">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 图片区域 -->
|
||||
<div class="train-content">
|
||||
<div class="train-content-top">
|
||||
<span class="train-content-bottom-title">列车ID:</span>
|
||||
<div class="train-content-top-img">
|
||||
<div class="train-content-top-img-box">
|
||||
<img :src="info.arrive_img_url" alt=""></img>
|
||||
</div>
|
||||
<div class="train-content-top-img-box">
|
||||
<img :src="info.leave_img_url" alt=""></img>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="train-content-bottom">
|
||||
<span class="train-content-bottom-title">列车与车厢号</span>
|
||||
<div class="flex items-center train-content-bottom-train">
|
||||
<div class="train-card-item mb-[8px] mr-[8px] flex items-center justify-center ">
|
||||
<div class="train_head_icon"></div>
|
||||
</div>
|
||||
<ul :class="['train-card-item-list', { 'high-height': info?.data?.train_data?.length > 15 }]">
|
||||
<li class="flex flex-1 train-card-item" v-for="(item, index) in info?.data?.train_data" :key="index">
|
||||
<div class="w-[80px] px-[8px] flex flex-col justify-center">
|
||||
<div>{{ item.model }}</div>
|
||||
<div>
|
||||
<!-- <span class="mr-3">04</span> -->
|
||||
<span>{{ item.carriage_number }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<style lang="scss" >
|
||||
@import url('./TrainInfoModel.scss');
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue