yueyixin
/
foreign-admin-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

交易组时间页面样式

This commit is contained in:
Songsl 2026-04-17 16:55:28 +08:00
parent aa66744970
commit 93893c2918
2 changed files with 140 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/views/trade/group/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="trade-group"> <div class="trade-group">
<el-form-item> <el-form-item label="交易系统时间设置">
<el-button type="primary" @click="addTableItem">添加</el-button> <el-button type="primary" @click="addTableItem">添加</el-button>
</el-form-item> </el-form-item>
<!-- 表格 --> <!-- 表格 -->
@ -8,28 +8,28 @@
<table> <table>
<template v-for="(item, index) in tradeGroupTree" :key="item.id"> <template v-for="(item, index) in tradeGroupTree" :key="item.id">
<tr> <tr>
<td>顺序</td> <td style="width: 50px">顺序</td>
<td rowspan="2"> <td style="width: 120px" rowspan="2">
<el-input v-if="item.editStatus" v-model="item.name" /> <el-input style="width: 100px" v-if="item.editStatus" v-model="item.name" />
<span v-else>{{ item.name }}</span> <span v-else>{{ item.name }}</span>
</td> </td>
<td>夏令时</td> <td style="width: 70px">夏令时</td>
<td> <td style="width: 60px">
<el-input v-if="item.editStatus" v-model="item.x_m" /> <el-input v-if="item.editStatus" v-model="item.x_m" />
<span v-else>{{ item.x_m }}</span> <span v-else>{{ item.x_m }}</span>
</td> </td>
<td>月</td> <td style="width: 50px">月</td>
<td> <td style="width: 60px">
<el-input v-if="item.editStatus" v-model="item.x_w" /> <el-input v-if="item.editStatus" v-model="item.x_w" />
<span v-else>{{ item.x_w }}</span> <span v-else>{{ item.x_w }}</span>
</td> </td>
<td>周</td> <td style="width: 50px">周</td>
<td> <td style="width: 60px">
<el-input v-if="item.editStatus" v-model="item.x_d" /> <el-input v-if="item.editStatus" v-model="item.x_d" />
<span v-else>{{ item.x_d }}</span> <span v-else>{{ item.x_d }}</span>
</td> </td>
<td>日</td> <td style="width: 50px">日</td>
<td>交易时间</td> <td style="width: 90px">交易时间</td>
<td class="time-picker-box"> <td class="time-picker-box">
<template v-if="item.editStatus"> <template v-if="item.editStatus">
<template v-if="item?.x_time_list"> <template v-if="item?.x_time_list">
@ -59,7 +59,7 @@
</template> </template>
</template> </template>
</td> </td>
<td rowspan="2"> <td rowspan="2" style="width: 140px">
<el-button type="primary" v-if="!item.editStatus" @click="item.editStatus = true" <el-button type="primary" v-if="!item.editStatus" @click="item.editStatus = true"
>编辑</el-button >编辑</el-button
> >
@ -137,7 +137,7 @@ import {
editGroupApi, editGroupApi,
deleteGroupApi, deleteGroupApi,
} from '@/api/modules/trade/group' } from '@/api/modules/trade/group'
import {ElMessageBox} from 'element-plus' import { ElMessageBox } from 'element-plus'
/** /**
* @description: 定义表格数据 * @description: 定义表格数据
@ -310,7 +310,7 @@ table {
/* input 输入框也缩小 */ /* input 输入框也缩小 */
:deep(.el-input) { :deep(.el-input) {
width: 60px; width: 40px;
.el-input__inner { .el-input__inner {
font-size: 12px; font-size: 12px;

255
src/views/trade/time/index.vue
View File

@ -1,55 +1,56 @@
<template> <template>
<div class="trade-group"> <div class="trade-group">
<el-form-item> <el-form-item label="交易系统时间设置">
交易系统时间设置 <el-button style="margin-left: 18px" type="primary" @click="handleAdd">添加</el-button>
<el-button style="margin-left: 18px;" type="primary" @click="handleAdd">添加</el-button> <el-button style="margin-left: 18px" type="danger" @click="handleDel">删除</el-button>
<el-button style="margin-left: 18px;" type="danger" @click="handleDel">删除</el-button> </el-form-item>
</el-form-item> <!-- 表格 -->
<!-- 表格 --> <div class="table-box">
<div class="table-box"> <table>
<table> <thead>
<thead> <tr>
<tr> <th>名称</th>
<th>名称</th> <th>休市时间</th>
<th>休市时间</th> <th>休市市场</th>
<th>休市市场</th> <th>备注</th>
<th>备注</th> <th>操作</th>
<th>操作</th> </tr>
</tr> </thead>
</thead>
<tbody>
<tr>
<td>
<el-input style="width: 80px;"/>
</td>
<td>
<el-date-picker type="datetimerange" start-placeholder="Start date"
end-placeholder="End date" format="YYYY-MM-DD HH:mm:ss"
date-format="YYYY-MM-DD HH:mm:ss" time-format="YYYY-MM-DD HH:mm:ss" />
</td>
<td>
<el-select multiple placeholder="Select" style="width: 240px">
<el-option :label="1" :value="1" />
<el-option :label="2" :value="2" />
<el-option :label="3" :value="3" />
<el-option :label="4" :value="4" />
<el-option :label="5" :value="5" />
</el-select>
</td>
<td><el-input style="width: 250px;"/></td>
<td>
<el-button type="primary" @click="handleAdd">确认</el-button>
<el-button type="danger" @click="handleDel">取消</el-button>
</td>
</tr>
</tbody>
</table>
</div>
<tbody>
<tr>
<td>
<el-input style="width: 80px" />
</td>
<td>
<el-date-picker
type="datetimerange"
start-placeholder="Start date"
end-placeholder="End date"
format="YYYY-MM-DD HH:mm:ss"
date-format="YYYY-MM-DD HH:mm:ss"
time-format="YYYY-MM-DD HH:mm:ss"
/>
</td>
<td>
<el-select multiple placeholder="Select" style="width: 240px">
<el-option :label="1" :value="1" />
<el-option :label="2" :value="2" />
<el-option :label="3" :value="3" />
<el-option :label="4" :value="4" />
<el-option :label="5" :value="5" />
</el-select>
</td>
<td><el-input style="width: 250px" /></td>
<td>
<el-button type="primary" @click="handleAdd">确认</el-button>
<el-button type="danger" @click="handleDel">取消</el-button>
</td>
</tr>
</tbody>
</table>
</div> </div>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -72,106 +73,100 @@ const dialogType = ref('')
* @description: 定义弹窗表格数据 * @description: 定义弹窗表格数据
*/ */
const tradeGroupForm = ref({ const tradeGroupForm = ref({
// 交易组名称 // 交易组名称
tradeGroupName: '', tradeGroupName: '',
// 交易所ID // 交易所ID
exchangeId: '', exchangeId: '',
// 状态 // 状态
status: 1, status: 1,
// 冬季交易时间 // 冬季交易时间
winterTime: [], winterTime: [],
// 夏季交易时间 // 夏季交易时间
summerTime: [], summerTime: [],
// 排序 // 排序
sort: 0, sort: 0,
// 主键ID // 主键ID
id: '', id: '',
}) })
/** /**
* @description: 页面加载完成需要请求的数据 * @description: 页面加载完成需要请求的数据
*/ */
onMounted(() => { onMounted(() => {})
})
const handleAdd = () => { const handleAdd = () => {
dialogVisible.value = true dialogVisible.value = true
dialogTitle.value = '添加交易组' dialogTitle.value = '添加交易组'
dialogType.value = 'add' dialogType.value = 'add'
tradeGroupForm.value = { tradeGroupForm.value = {
tradeGroupName: '', tradeGroupName: '',
winterTime: [], winterTime: [],
summerTime: [], summerTime: [],
status: 1, status: 1,
sort: 0, sort: 0,
id: '', id: '',
} as any } as any
}
const handleDel = () => {
} }
const handleDel = () => {}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
/* 给 table 及所有 td 加边框 */ /* 给 table 及所有 td 加边框 */
table { table {
border-collapse: collapse; border-collapse: collapse;
width: 100%; width: 100%;
table-layout: auto; table-layout: auto;
/* 宽度自适应内容 */ /* 宽度自适应内容 */
th { th {
font-weight: bold; font-weight: bold;
} }
td, td,
th { th {
height: 48px; height: 48px;
border: 1px solid #dcdfe6; border: 1px solid #dcdfe6;
padding: 4px 8px; padding: 4px 8px;
/* 内边距缩小 */ /* 内边距缩小 */
text-align: center; text-align: center;
font-size: 12px;
/* 文字变小 */
white-space: nowrap;
/* 文字不换行 */
vertical-align: middle;
/* 垂直居中 */
/* 时间选择器容器：两个选择器横排不换行 */
:deep(.el-time-picker) {
display: inline-block;
.el-range-editor {
width: 100px;
/* 缩小时间选择器宽度 */
font-size: 12px; font-size: 12px;
/* 文字变小 */ }
white-space: nowrap;
/* 文字不换行 */
vertical-align: middle;
/* 垂直居中 */
/* 时间选择器容器：两个选择器横排不换行 */ .el-range-input {
:deep(.el-time-picker) { font-size: 12px;
display: inline-block; }
.el-range-editor {
width: 100px;
/* 缩小时间选择器宽度 */
font-size: 12px;
}
.el-range-input {
font-size: 12px;
}
}
/* input 输入框也缩小 */
:deep(.el-input) {
width: 60px;
.el-input__inner {
font-size: 12px;
height: 28px;
}
}
/* 按钮缩小 */
:deep(.el-button) {
padding: 5px 10px;
font-size: 12px;
}
} }
/* input 输入框也缩小 */
:deep(.el-input) {
width: 60px;
.el-input__inner {
font-size: 12px;
height: 28px;
}
}
/* 按钮缩小 */
:deep(.el-button) {
padding: 5px 10px;
font-size: 12px;
}
}
} }
</style> </style>