From 1fe57c5855655e406e44497417152ca0e1e2cc5e Mon Sep 17 00:00:00 2001
From: wangfei <3597712270@qq.com>
Date: 星期二, 13 五月 2025 14:00:17 +0800
Subject: [PATCH] 展会样式布局更改
---
UI-Project/src/views/hollow/hollowaluminum.vue | 85 ++++++++++++++++++++++--------------------
1 files changed, 44 insertions(+), 41 deletions(-)
diff --git a/UI-Project/src/views/hollow/hollowaluminum.vue b/UI-Project/src/views/hollow/hollowaluminum.vue
index bb3a06c..413fa9b 100644
--- a/UI-Project/src/views/hollow/hollowaluminum.vue
+++ b/UI-Project/src/views/hollow/hollowaluminum.vue
@@ -119,8 +119,8 @@
const getColorByState = (state) => {
switch (state) {
case -2: return "gray";
- case -1: return "#99BBFF";
- case 0: return "#7AC5CD";
+ case -1: return "gray";
+ case 0: return "gray";
case 1: return "#95d475";
case 8: return "#911005";
default: return "#CDAF95";
@@ -131,58 +131,61 @@
<div style="height: 500px;">
<div>
<el-card style="flex: 1;margin-left: 10px;margin-top: 20px;">
- <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;">
- <div class="block text-center" m="t-4" >
- <el-carousel ref="carouselRef" :active-index="activeIndex" @change="handleCarouselChange" height="750px"
- :autoplay="false">
- <el-carousel-item v-for="(item, index) in carouselData" :key="index">
- <div class="carousel-item-content" :style="{
- width: `${item.width*0.5}px`,
- height: `${item.height*0.3}px`,
- backgroundColor: getColorByState(item.state),
- }">
- <div style="color: #090909;">
- <p>{{ item.flowCardId }}</p>
- <p>{{ $t('basicData.widtha') }}{{ item.width }}</p>
- <p>{{ $t('basicData.heighta') }}{{ item.height }}</p>
- <p>{{ $t('basicData.thicknessa') }}{{ item.thickness }}</p>
- <p>{{ $t('hellow.logarithm') }}{{ item.hollowSequence }}</p>
- </div>
- <div>
- <el-button type="text" @click="handleDilapidationClick(item)">{{ $t('order.dilapidation') }}</el-button>
- <el-button type="text" :disabled="item.state === 1" @click="handleButtonClick(item)">{{ $t('basicData.yes') }}</el-button>
- </div>
+ <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;">
+ <div class="block text-center" m="t-4">
+ <el-carousel ref="carouselRef" :active-index="activeIndex" @change="handleCarouselChange" height="750px"
+ :autoplay="false">
+ <el-carousel-item v-for="(item, index) in carouselData" :key="index">
+ <div style="display: flex; justify-content: center; align-items: flex-end; height: 100%; padding-bottom: 50px;">
+ <div class="carousel-item-content" :style="{
+ width: `${item.width*0.5}px`,
+ height: `${item.height*0.3}px`,
+ backgroundColor: getColorByState(item.state),
+ }">
+ <div style="color: #FAFCFF;font-size:18px;text-align: center; display: flex; flex-direction: column; justify-content: center; height: 87%;">
+ <p>{{ item.flowCardId }}</p>
+ <p>{{ $t('basicData.widtha') }}{{ item.width }}</p>
+ <p>{{ $t('basicData.heighta') }}{{ item.height }}</p>
+ <p>{{ $t('basicData.thicknessa') }}{{ item.thickness }}</p>
+ <p>{{ $t('hellow.logarithm') }}{{ item.hollowSequence }}</p>
</div>
- </el-carousel-item>
- </el-carousel>
+ <div style="position: absolute; bottom: 20px; right: 20px;">
+ <el-button size="large" @click="handleDilapidationClick(item)">{{ $t('order.dilapidation') }}</el-button>
+ <el-button size="large" :disabled="item.state === 1" @click="handleButtonClick(item)">{{ $t('basicData.yes') }}</el-button>
+ </div>
+ </div>
</div>
- </div>
- <el-dialog v-model="isDialogVisible" width="20%" top="30vh" style="text-align: center;">
- <div>
- <el-select v-model="selectedLayer" clearable :placeholder="$t('hellow.layer')" style="width: 50%;">
- <el-option v-for="n in maxLayer" :key="n" :label="n" :value="n"></el-option>
- </el-select>
- </div>
- <div slot="footer" style="margin-top: 15px;">
- <el-button @click="isDialogVisible = false">{{ $t('basicData.cancel') }}</el-button>
- <el-button type="primary" :disabled="!selectedLayer" @click="confirmDilapidation">{{ $t('basicData.confirm') }}</el-button>
- </div>
- </el-dialog>
- </el-card>
+ </el-carousel-item>
+ </el-carousel>
+ </div>
+ </div>
+ <el-dialog v-model="isDialogVisible" width="20%" top="30vh" style="text-align: center;">
+ <div>
+ <el-select v-model="selectedLayer" clearable :placeholder="$t('hellow.layer')" style="width: 50%;">
+ <el-option v-for="n in maxLayer" :key="n" :label="n" :value="n"></el-option>
+ </el-select>
+ </div>
+ <div slot="footer" style="margin-top: 15px;">
+ <el-button @click="isDialogVisible = false">{{ $t('basicData.cancel') }}</el-button>
+ <el-button type="primary" :disabled="!selectedLayer" @click="confirmDilapidation">{{ $t('basicData.confirm') }}</el-button>
+ </div>
+ </el-dialog>
+</el-card>
</div>
</div>
</template>
<style scoped>
-.carousel-item-content {
+ .carousel-item-content {
display: flex;
flex-direction: column;
align-items: center;
- justify-content: center;
+ justify-content: flex-end;
border: 1px solid #ccc;
margin: 10px auto;
color: white;
- /* 纭繚鏂囧瓧棰滆壊鍙 */
text-align: center;
+ padding-bottom: 0px;
+ box-sizing: border-box;
}
.demonstration {
color: var(--el-text-color-secondary);
--
Gitblit v1.8.0