New file |
| | |
| | | <script lang="ts" setup> |
| | | import {Search} from "@element-plus/icons-vue"; |
| | | import {reactive} from "vue"; |
| | | import {useRouter} from "vue-router" |
| | | const router = useRouter() |
| | | import type { TableColumnCtx } from 'element-plus' |
| | | import { ElMessage, ElMessageBox } from 'element-plus' |
| | | import { useI18n } from 'vue-i18n' |
| | | const { t } = useI18n() |
| | | import { WebSocketHost ,host} from '@/utils/constants' |
| | | import request from "@/utils/request" |
| | | import { initializeWebSocket, closeWebSocket } from '@/utils/WebSocketService'; |
| | | import { ref, onMounted, onUnmounted, onBeforeUnmount } from "vue"; |
| | | const selectValuesa = reactive([]); |
| | | const selectedProjectNo = ref(''); // 当前选中的工程号 |
| | | const loadingline = ref(''); // 当前选中的上片线 |
| | | const dialogFormVisible = ref(false) |
| | | const blind = ref(false) |
| | | const blinda = ref(false) |
| | | const blindb = ref(false) |
| | | const add = ref(false) |
| | | const adda = ref(false) |
| | | const dialoglea = ref(false) |
| | | const tableDatax = ref([]) |
| | | const user = ref(''); |
| | | const projectNo = ref(''); |
| | | const workstationId = ref(''); |
| | | const id = ref(''); |
| | | const patternHeight = ref(''); |
| | | const patternWidth = ref(''); |
| | | const filmsId = ref(''); |
| | | const patternThickness = ref(''); |
| | | const number = ref(''); |
| | | const canSelectProject = ref(true); |
| | | const canStartLoading = ref(false); |
| | | const selectedValue = ref(''); // 当前选中的宽 |
| | | const selectedValuea = ref(''); |
| | | const selectedValueb = ref(''); |
| | | const selectedValuec = ref(''); |
| | | // const upstatus = ref('上片机手动状态:'); // 假设这个用于显示自动/手动状态 |
| | | const upstatus = ref(t('basicData.machineaa')); |
| | | const cuttingMachine = ref(''); // 假设这个用于存储后端返回的状态值(0或1) |
| | | const cuttingMachineStatusColor = ref('#911005'); // 用于动态设置i标签的背景色 |
| | | const inKageWord = ref(0); // 用于存储要传递给接口的inKageWord值 |
| | | const options = ref<any[]>([]); // 下拉选项列表 |
| | | const ida = ref(null); |
| | | const selectOptions = ref<Array<any>>([]); // 下拉选选项数组 |
| | | const selectOptionsa = ref<Array<any>>([]); // 下拉选选项数组 |
| | | const selectOptionsb = ref<Array<any>>([]); // 下拉选选项数组 |
| | | const selectOptionsc = ref<Array<any>>([]); // 下拉选选项数组 |
| | | const tableDataa = ref([]) |
| | | const tableData = reactive([]); |
| | | const handlezhiban = () => { |
| | | dialoglea.value = true; // 打开绑定架子对话框 |
| | | }; |
| | | const selectproject = () => { |
| | | dialogFormVisible.value = true; |
| | | }; |
| | | |
| | | |
| | | onMounted(() => { |
| | | // socket = initializeWebSocket(socketUrl, handleMessage); |
| | | }); |
| | | onUnmounted(() => { |
| | | if (socket) { |
| | | closeWebSocket(socket); |
| | | } |
| | | }); |
| | | //定义接收加载表头下拉数据 |
| | | const titleSelectJson = ref({ |
| | | processType: [], |
| | | }) |
| | | const titleSelectJsona = ref({ |
| | | processTypea: [], |
| | | }) |
| | | let socket = null; |
| | | const socketUrl = `ws://${WebSocketHost}:${host}/api/loadGlass/api/talk/loadGlass`; |
| | | // 定义消息处理函数,更新 receivedData 变量 |
| | | |
| | | const requestData = { |
| | | state: 100 |
| | | }; |
| | | |
| | | |
| | | onBeforeUnmount(() => { |
| | | closeWebSocket(); |
| | | }); |
| | | // 添加 |
| | | const handleBindRack = (row) => { |
| | | workstationId.value = row.workstationId; // 假设rackNumber是架号字段的属性名 |
| | | ida.value = row.id; |
| | | add.value = true; // 打开绑定架子对话框 |
| | | }; |
| | | // 暂停 |
| | | const handlea = async () => { |
| | | try { |
| | | let engineeringId = window.localStorage.getItem('engineeringId') |
| | | console.log(engineeringId); |
| | | if (engineeringId !== '') { |
| | | const response = await request.post('/loadGlass/engineering/engineering/pauseTask', { |
| | | engineeringId: engineeringId, |
| | | state: 0, |
| | | }) |
| | | if (response.code == 200) { |
| | | ElMessage.success(response.message); |
| | | blinda.value = false; |
| | | // tableData.splice([]); |
| | | } else { |
| | | // 请求失败,显示错误消息 |
| | | ElMessage.error(response.message); |
| | | } |
| | | } |
| | | else { |
| | | ElMessage({ |
| | | type: 'info', |
| | | message: t('basicData.infonull'), |
| | | }) |
| | | } |
| | | } |
| | | catch (error) { |
| | | // 处理错误 |
| | | console.error(error); |
| | | } |
| | | } |
| | | function getStatusText(state: number) { |
| | | switch (state) { |
| | | case 0: |
| | | return t('basicData.waiting'); |
| | | case 1: |
| | | return t('basicData.up'); |
| | | case 2: |
| | | return t('basicData.up'); |
| | | case 100: |
| | | return t('basicData.finish'); |
| | | } |
| | | } |
| | | function getStatusType(state: number) { |
| | | switch (state) { |
| | | case 0: |
| | | return 'warning'; |
| | | case 1: |
| | | return 'primary'; |
| | | case 2: |
| | | return 'primary'; |
| | | case 100: |
| | | return 'success'; |
| | | } |
| | | } |
| | | // 开始上片 |
| | | const handleBind = (row) => { |
| | | blind.value = true; // 打开绑定架子对话框 |
| | | }; |
| | | // 暂停 |
| | | const handleBinda = (row) => { |
| | | blinda.value = true; |
| | | }; |
| | | // 停止任务 |
| | | const handleBindb = (row) => { |
| | | blindb.value = true; |
| | | }; |
| | | |
| | | // 删除 |
| | | const handleBindRacka = (row) => { |
| | | workstationId.value = row.workstationId; |
| | | adda.value = true; |
| | | }; |
| | | const toggleEnableState = async (row: any) => { |
| | | // 检查 id 是否为空 |
| | | if (!row.id) { |
| | | ElMessage.error(t('basicData.updatanull')); |
| | | return; // 如果 id 为空,则不执行后续操作 |
| | | } |
| | | const newState = row.state === 100 ? 0 : 100; |
| | | try { |
| | | // 发送请求到后端更新状态 |
| | | const response = await request.post('/loadGlass/up-patten-usage/updateGlassState', { id: row.id, state: newState }); |
| | | if (response.code === 200) { |
| | | ElMessage.success(response.message); |
| | | row.state = newState; |
| | | } else { |
| | | ElMessage.error(response.message); |
| | | } |
| | | } catch (error) { |
| | | // 处理请求错误 |
| | | ElMessage.error(t('basicData.glassnull')); |
| | | } |
| | | }; |
| | | </script> |
| | | <template> |
| | | <div> |
| | | <div id="dotClass"> |
| | | <div>{{ $t('basicData.laserprinting') }}</div> |
| | | <i :style="{ marginTop: '2px', backgroundColor: markingMachineStatus, width: '18px', height: '18px', borderRadius: '50%', display: 'block' }"></i> |
| | | <el-button @click="confirmMarkingMachine" style="margin-left: 30px;margin-top: -3px;">{{ $t('basicData.yes') }}</el-button> |
| | | <div style="margin-left: 70px;">{{ $t('basicData.cuttingmachine') }}</div> |
| | | <i :style="{ marginTop: '2px', backgroundColor: cuttingMachineStatus, width: '18px', height: '18px', borderRadius: '50%', display: 'block' }"></i> |
| | | <el-button @click="confirmCuttingMachine" style="margin-left: 30px;margin-top: -3px;" >{{ $t('basicData.yes') }}</el-button> |
| | | <div style="margin-left: 70px;">{{ upstatus }} </div> |
| | | <i :style="{ marginTop: '2px', backgroundColor: cuttingMachineStatusColor, width: '18px', height: '18px', borderRadius: '50%', display: 'block' }"></i> |
| | | <el-button @click="confirmCutting" style="margin-left: 30px;margin-top: -3px;" >{{ $t('basicData.change') }}</el-button> |
| | | |
| | | </div> |
| | | <el-button style="margin-top: 5px;margin-left: 15px;" type="primary" @click="selectproject">{{ $t('Mounting.previewproject') }}</el-button> |
| | | <el-button style="margin-top: 5px;margin-left: 20px;" type="success" @click="handleBind">{{ $t('basicData.startloading') }}</el-button> |
| | | <el-button style="margin-top: 5px;margin-left: 20px;" id="searchButton" type="warning" @click="handleBinda">{{ $t('basicData.stop') }}</el-button> |
| | | <el-button style="margin-top: 5px;margin-left: 20px;" id="searchButton" type="info" @click="handlezhiban">{{ $t('searchOrder.dutyinformation') }}</el-button> |
| | | <el-select v-model="selectValuesa[1]" clearable :placeholder="$t('Mounting.loadinglinea')" style="margin-top: 5px;margin-left: 20px;" > |
| | | <el-option :label="$t('Mounting.all')" value="0"></el-option> |
| | | <el-option :label="$t('Mounting.oneloadingline')" value="1"></el-option> |
| | | <el-option :label="$t('Mounting.twoloadingline')" value="2"></el-option> |
| | | </el-select> |
| | | <el-select v-model="selectValuesa[0]" clearable :placeholder="$t('film.taskstatus')" style="margin-top: 5px;margin-left: 20px;" > |
| | | <el-option :label="$t('Mounting.waiting')" value="1"></el-option> |
| | | <el-option :label="$t('film.execution')" value="2"></el-option> |
| | | <el-option :label="$t('film.finish')" value="3"></el-option> |
| | | </el-select> |
| | | <el-button type="primary" style="margin-left: 10px;" @click="selectReportData()">{{ $t('Mounting.setparameters') }}</el-button> |
| | | <el-card style="flex: 1;margin-left: 10px;margin-top: 15px;" v-loading="loading"> |
| | | <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;"> |
| | | <el-table |
| | | height="350" |
| | | ref="table" |
| | | :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}" |
| | | :data="tableData" |
| | | > |
| | | <el-table-column prop="layoutSequence" :label="$t('Mounting.project')" width="100" align="center"/> |
| | | <el-table-column prop="engineeringId" :label="$t('Mounting.width')" width="200" align="center"/> |
| | | <el-table-column prop="width" :label="$t('Mounting.height')" align="center"/> |
| | | <el-table-column prop="height" :label="$t('Mounting.thickness')" align="center"/> |
| | | <el-table-column prop="filmsId" :label="$t('Mounting.loadinglinea')" align="center"/> |
| | | <el-table-column :label="$t('Mounting.projectnumber')" align="center"> |
| | | <template #default="{ row }"> |
| | | <!-- 这里总是显示 1 --> |
| | | <span>{{ 1 }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | align="center" |
| | | :label="$t('Mounting.state')" |
| | | min-width="80" |
| | | prop="state" |
| | | > |
| | | <template #default="scope"> |
| | | <el-tag |
| | | :type="scope.row.state === 100 ? 'success' : 'warning'" |
| | | @click="toggleEnableState(scope.row)" |
| | | > |
| | | {{ scope.row.state === 100 ? $t('Mounting.pass') : $t('Mounting.waiting') }} |
| | | </el-tag> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="filmsId" :label="$t('Mounting.createtime')" align="center"/> |
| | | </el-table> |
| | | </div> |
| | | </el-card> |
| | | <div style="display: flex;"> |
| | | <div style="width: 49%;float: left;"> |
| | | <div style="display: flex;"> |
| | | <img src="../../assets/shangpianji.png" alt="" style="max-width: 25%;max-height: 25%;margin-left: 10%;margin-top: 5%;"> |
| | | <el-table :data="tableDataa" border style="width: 75%;margin-top: 10%;margin-left: 2%;" |
| | | :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}" |
| | | > |
| | | <el-table-column prop="workstationId" align="center" :label="$t('basicData.station')" min-width="60" /> |
| | | <el-table-column prop="patternWidth" align="center" :label="$t('basicData.width')" min-width="80" /> |
| | | <el-table-column prop="patternHeight" align="center" :label="$t('basicData.height')" min-width="80" /> |
| | | <el-table-column prop="filmsId" align="center" :label="$t('basicData.coatingtypes')" min-width="80" /> |
| | | <el-table-column prop="number" align="center" :label="$t('basicData.quantity')" min-width="80" /> |
| | | </el-table> |
| | | </div> |
| | | </div> |
| | | <div style="width: 48%;float: right;"> |
| | | <div style="display: flex;"> |
| | | <img src="../../assets/shangpianji.png" alt="" style="max-width: 25%;max-height: 25%;margin-left: 10%;margin-top: 5%;"> |
| | | <el-table :data="tableDataa" border style="width: 75%;margin-top: 10%;margin-left: 2%;" |
| | | :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}" |
| | | > |
| | | <el-table-column prop="workstationId" align="center" :label="$t('basicData.station')" min-width="60" /> |
| | | <el-table-column prop="patternWidth" align="center" :label="$t('basicData.width')" min-width="80" /> |
| | | <el-table-column prop="patternHeight" align="center" :label="$t('basicData.height')" min-width="80" /> |
| | | <el-table-column prop="filmsId" align="center" :label="$t('basicData.coatingtypes')" min-width="80" /> |
| | | <el-table-column prop="number" align="center" :label="$t('basicData.quantity')" min-width="80" /> |
| | | </el-table> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <el-dialog v-model="blind" top="30vh" width="25%" :title="$t('basicData.startfilm')"> |
| | | <template #footer> |
| | | <div id="dialog-footer"> |
| | | <el-button type="primary" @click="handle"> |
| | | {{ $t('basicData.confirm') }} |
| | | </el-button> |
| | | <el-button @click="blind = false">{{ $t('basicData.cancel') }}</el-button> |
| | | </div> |
| | | </template> |
| | | </el-dialog> |
| | | |
| | | <el-dialog v-model="dialoglea" top="15vh" width="70%" :title="$t('searchOrder.dutyinformation')"> |
| | | <el-table ref="table" style="margin-top: 20px;height: 300px;" |
| | | :data="tableDatax" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}"> |
| | | <el-table-column prop="line" fixed align="center" :label="$t('searchOrder.line')"/> |
| | | <el-table-column prop="workProcesses" fixed align="center" :label="$t('searchOrder.process')" /> |
| | | <el-table-column prop="teamsGroupsName" align="center" :label="$t('searchOrder.team')"> |
| | | <template #default="{ row }"> |
| | | <el-input v-model="row.teamsGroupsName" autocomplete="off" min-width="150"/> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="deviceName" align="center" :label="$t('searchOrder.basic')"> |
| | | <template #default="{ row }"> |
| | | <el-input v-model="row.deviceName" autocomplete="off" min-width="150"/> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <template #footer> |
| | | <div id="dialog-footer"> |
| | | <el-button type="primary" @click="handleConfirm"> |
| | | {{ $t('searchOrder.add') }} |
| | | </el-button> |
| | | <el-button @click="dialoglea = false">{{ $t('searchOrder.cancel') }}</el-button> |
| | | </div> |
| | | </template> |
| | | </el-dialog> |
| | | <el-dialog v-model="blinda" top="24vh" width="30%" :title="$t('basicData.whetherpause')"> |
| | | <div style="margin-left: 50px;margin-bottom: 10px;"> |
| | | <el-form-item :label="$t('Mounting.loadingline')" :required="true"> |
| | | <el-select v-model="loadingline" clearable :placeholder="$t('Mounting.inloadingline')" style="margin-left: 20px;" > |
| | | <el-option :label="$t('Mounting.all')" value="0"></el-option> |
| | | <el-option :label="$t('Mounting.oneloadingline')" value="1"></el-option> |
| | | <el-option :label="$t('Mounting.twoloadingline')" value="2"></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | </div> |
| | | <template #footer> |
| | | <div id="dialog-footer"> |
| | | <el-button type="primary" @click="handleup"> |
| | | {{ $t('basicData.confirm') }} |
| | | </el-button> |
| | | <el-button @click="blinda = false">{{ $t('basicData.cancel') }}</el-button> |
| | | </div> |
| | | </template> |
| | | </el-dialog> |
| | | |
| | | <el-dialog v-model="add" top="23vh" width="45%" :title="$t('basicData.addglass')" > |
| | | <div style="margin-left: -50px;margin-top: 10px;margin-bottom: 10px;"> |
| | | <el-form size="mini" label-width="150px"> |
| | | <el-form label-width="70px" label-position="right"> |
| | | <el-row style="margin-top: -15px;margin-bottom: -2px;"> |
| | | <el-col :span="6"> |
| | | <div id="dt" style="font-size: 15px;"> |
| | | <div> |
| | | <el-form-item :label="$t('basicData.widtha')" :required="true" style="width: 14vw"> |
| | | <el-select |
| | | v-model="selectedValue" |
| | | filterable |
| | | clearable |
| | | :placeholder="$t('basicData.selectwidth')" |
| | | style="width: 220px" |
| | | @input="handleInputChangea" |
| | | > |
| | | <el-option |
| | | v-for="item in selectOptions" |
| | | :key="item.id" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </div></div> |
| | | </el-col> |
| | | <el-col :span="9"> |
| | | <div id="dta" style="font-size: 15px;"> |
| | | <div> |
| | | <el-form-item :label="$t('basicData.heighta')" :required="true" style="width: 14vw"> |
| | | <el-select |
| | | v-model="selectedValuea" |
| | | filterable |
| | | clearable |
| | | :placeholder="$t('basicData.selectheight')" |
| | | style="width: 220px" |
| | | @input="handleInputChangea" |
| | | > |
| | | <el-option |
| | | v-for="item in selectOptionsa" |
| | | :key="item.id" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | /> |
| | | </el-select> |
| | | </el-form-item></div> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row style="margin-top: 10px;"> |
| | | <el-col :span="6"> |
| | | <div id="dt" style="font-size: 15px;"> |
| | | <div> |
| | | <el-form-item :label="$t('basicData.coatingtypesa')" :required="true" style="width: 14vw;"> |
| | | <el-select |
| | | v-model="selectedValueb" |
| | | filterable |
| | | clearable |
| | | :placeholder="$t('basicData.selectcoatingtypes')" |
| | | style="width: 220px" |
| | | @input="handleInputChangea" |
| | | > |
| | | <el-option |
| | | v-for="item in selectOptionsb" |
| | | :key="item.id" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | /> |
| | | </el-select> |
| | | </el-form-item></div></div> |
| | | </el-col> |
| | | <el-col :span="9"> |
| | | <div id="dta" style="font-size: 15px;"> |
| | | <div> |
| | | <el-form-item :label="$t('basicData.thicknessa')" :required="true" style="width: 14vw"> |
| | | <el-select |
| | | v-model="selectedValuec" |
| | | filterable |
| | | clearable |
| | | :placeholder="$t('basicData.selectthickness')" |
| | | style="width: 220px" |
| | | @input="handleInputChangea" |
| | | > |
| | | <el-option |
| | | v-for="item in selectOptionsc" |
| | | :key="item.id" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | /> |
| | | </el-select> |
| | | <!-- <el-input v-model="patternThickness" autocomplete="off" /> --> |
| | | </el-form-item></div></div> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row style="margin-top: 10px;"> |
| | | <el-col :span="6"> |
| | | <div id="dt" style="font-size: 15px;"> |
| | | <div> |
| | | <el-form-item :label="$t('basicData.quantitya')" :required="true" style="width: 14vw;"> |
| | | <el-input :placeholder="$t('basicData.selectquantity')" v-model="number" autocomplete="off" /> |
| | | </el-form-item></div></div> |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | | </el-form> |
| | | </div> |
| | | <template #footer> |
| | | <div id="dialog-footer"> |
| | | <el-button type="primary" @click="handleConfirm"> |
| | | {{ $t('basicData.confirm') }} |
| | | </el-button> |
| | | <el-button @click="add = false">{{ $t('basicData.cancel') }}</el-button> |
| | | </div> |
| | | </template> |
| | | </el-dialog> |
| | | <el-dialog v-model="adda" top="30vh" width="25%" :title="$t('basicData.deletemessage')"> |
| | | <template #footer> |
| | | <div id="dialog-footer"> |
| | | <el-button type="primary" @click="handleConfirma"> |
| | | {{ $t('basicData.confirm') }} |
| | | </el-button> |
| | | <el-button @click="adda = false">{{ $t('basicData.cancel') }}</el-button> |
| | | </div> |
| | | </template> |
| | | </el-dialog> |
| | | </div> |
| | | <el-dialog v-model="dialogFormVisible" top="24vh" width="50%" > |
| | | <div class="flex-container" style="margin-left: 50px;margin-bottom: 10px;"> |
| | | <el-form-item :label="$t('Mounting.loadingline')" :required="true"> |
| | | <el-select v-model="loadingline" clearable :placeholder="$t('Mounting.inloadingline')" > |
| | | <el-option :label="$t('Mounting.oneloadingline')" value="1"></el-option> |
| | | <el-option :label="$t('Mounting.twoloadingline')" value="2"></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item :label="$t('Mounting.projecta')" :required="true"> |
| | | <el-select |
| | | v-model="selectedProjectNo" |
| | | filterable |
| | | clearable |
| | | :placeholder="$t('basicData.plselectproject')" |
| | | style="width: 220px" |
| | | @input="handleInputChange" |
| | | > |
| | | <el-option |
| | | v-for="item in titleSelectJson['processType']" |
| | | :key="item.id" |
| | | :label="item.projectNo" |
| | | :value="item.projectNo" |
| | | /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </div> |
| | | <template #footer> |
| | | <div id="dialog-footer"> |
| | | <el-button type="primary" @click="handleup"> |
| | | {{ $t('basicData.confirm') }} |
| | | </el-button> |
| | | <el-button @click="dialogFormVisible = false">{{ $t('basicData.cancel') }}</el-button> |
| | | </div> |
| | | </template> |
| | | </el-dialog> |
| | | </template> |
| | | |
| | | <style scoped> |
| | | .flex-container { |
| | | display: flex; |
| | | align-items: center; /* 垂直居中 */ |
| | | } |
| | | .flex-container .el-form-item { |
| | | flex: 1; /* 使每个表单项占据相等的空间 */ |
| | | margin-right: 0; /* 移除默认的右侧边距 */ |
| | | } |
| | | .flex-container .el-form-item:last-child { |
| | | margin-left: 20px; /* 为第二个表单项添加左侧边距 */ |
| | | } |
| | | |
| | | |
| | | |
| | | #dt { display:block; float:left;line-height: 20px;margin-left: 100px;} |
| | | #dta { display:block; float:left;line-height: 20px;margin-left: 80%;} |
| | | #dialog-footer{ |
| | | text-align: center; |
| | | margin-top: -15px; |
| | | } |
| | | #dotClass { |
| | | display: flex; |
| | | margin-left: 20px; |
| | | size: 50px; |
| | | margin-top: 20px; |
| | | margin-bottom: 10px; |
| | | } |
| | | </style> |