|
@@ -0,0 +1,506 @@
|
|
|
|
+<template>
|
|
|
|
+ <!-- 保温箱管理 -->
|
|
|
|
+ <div>
|
|
|
|
+ <actionBar :operateList="operateList" :formList="formList" :ruleForm="searchRuleForm" @openModel="openModel"
|
|
|
|
+ @searchProtocol="searchProtocol"></actionBar>
|
|
|
|
+ <div class="card_content">
|
|
|
|
+ <!-- 表单 -->
|
|
|
|
+ <tables :tableList="tableList" :tableData="tableData" @buttonData="buttonData"></tables>
|
|
|
|
+ <!-- 分页 -->
|
|
|
|
+ <div v-if="Total">
|
|
|
|
+ <pagination :total="Total" :currentPage="Pagination.PageIndex" @changeSize="changeSize"
|
|
|
|
+ @changeCurrent="changeCurrent">
|
|
|
|
+ </pagination>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <el-dialog :title="staffTitle" :visible.sync="staffDialogVisible" width="600px" :close-on-click-modal="false"
|
|
|
|
+ @close="closeDialog">
|
|
|
|
+ <forms ref="childRules" :formNewList="formRuleList" :ruleForm="ruleForm" labelWidth="100px"></forms>
|
|
|
|
+ <span slot="footer" class="dialog-footer" v-if="operationType != 'logs'">
|
|
|
|
+ <el-button plain @click="staffDialogVisible = false">取 消</el-button>
|
|
|
|
+ <el-button type="primary" :loading="confirmLoading" @click="handleAdd">确 定</el-button>
|
|
|
|
+ </span>
|
|
|
|
+ </el-dialog>
|
|
|
|
+ <div class="management_card">
|
|
|
|
+ <el-dialog :visible.sync="importDialogVisible" width="500px" :close-on-click-modal="false" @close="closeDialogil">
|
|
|
|
+ <div class="card_import">
|
|
|
|
+ <div class="card_incubat">
|
|
|
|
+ <forms ref="incubatorRules" labelPosition="left" :formNewList="stateRuleList" :ruleForm="stateRuleForm"
|
|
|
|
+ labelWidth="100px"></forms>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="card_search_input">
|
|
|
|
+ <el-input v-model="nameTitle" placeholder="设备名称" @input="incubatorInput"></el-input>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- 表单 -->
|
|
|
|
+ <tables ref="refIncubator" :tableList="incubatorList" :tableData="incubatorData"></tables>
|
|
|
|
+ <!-- 分页 -->
|
|
|
|
+ <div v-if="Total1">
|
|
|
|
+ <pagination :total="Total1" :currentPage="Paginationil.PageIndex" :pager-countnum="5"
|
|
|
|
+ layout="sizes, prev, pager, next" @changeSize="changeSizeil" @changeCurrent="changeCurrentil">
|
|
|
|
+ </pagination>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
|
+ <el-button plain @click="importDialogVisible = false">取 消</el-button>
|
|
|
|
+ <el-button type="primary" :loading="incubatorLoading" @click="incubatorAdd">导 入</el-button>
|
|
|
|
+ </span>
|
|
|
|
+ </el-dialog>
|
|
|
|
+ </div>
|
|
|
|
+ <el-dialog :visible.sync="dialogVisible" width="80%" @close="temperatureClose">
|
|
|
|
+ <template slot="title">
|
|
|
|
+ <div style="display: flex;align-items: center;">
|
|
|
|
+ <span style="margin-right: 10px;font-size: 20px;">温湿度记录</span>
|
|
|
|
+ <el-date-picker v-model="timeQuantum" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange"
|
|
|
|
+ :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
|
|
|
|
+ align="center" @change="timeChange">
|
|
|
|
+ </el-date-picker>
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ <thermography ref="thermo" :waybillNo="waybillNo" :timeData="timeQuantum"></thermography>
|
|
|
|
+ </el-dialog>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+ import {
|
|
|
|
+ getCoolerBox,
|
|
|
|
+ getCoolerBoxDetails,
|
|
|
|
+ addCoolerBox,
|
|
|
|
+ putCoolerBox,
|
|
|
|
+ delCoolerBox,
|
|
|
|
+ getDevice,
|
|
|
|
+ addCoolerBoxImport
|
|
|
|
+ } from '@/api/incubator'
|
|
|
|
+ import actionBar from '@/components/actionBar'
|
|
|
|
+ import tables from '@/components/tables'
|
|
|
|
+ import pagination from '@/components/pagination'
|
|
|
|
+ import forms from '@/components/forms'
|
|
|
|
+ import thermography from '@/components/thermography'
|
|
|
|
+ import {
|
|
|
|
+ formRules,
|
|
|
|
+ employee,
|
|
|
|
+ incubator
|
|
|
|
+ } from "./incubator.js";
|
|
|
|
+ import {
|
|
|
|
+ startStatus,
|
|
|
|
+ } from '@/assets/js/blockSort'
|
|
|
|
+ export default {
|
|
|
|
+ name: 'IncubatorManagement',
|
|
|
|
+ components: {
|
|
|
|
+ actionBar,
|
|
|
|
+ tables,
|
|
|
|
+ pagination,
|
|
|
|
+ forms,
|
|
|
|
+ thermography
|
|
|
|
+ },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ pickerOptions: {
|
|
|
|
+ shortcuts: [{
|
|
|
|
+ text: '最近一周',
|
|
|
|
+ onClick(picker) {
|
|
|
|
+ const end = new Date();
|
|
|
|
+ const start = new Date();
|
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
|
|
|
+ picker.$emit('pick', [start, end]);
|
|
|
|
+ }
|
|
|
|
+ }, {
|
|
|
|
+ text: '最近一个月',
|
|
|
|
+ onClick(picker) {
|
|
|
|
+ const end = new Date();
|
|
|
|
+ const start = new Date();
|
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
|
|
|
+ picker.$emit('pick', [start, end]);
|
|
|
|
+ }
|
|
|
|
+ }, {
|
|
|
|
+ text: '最近三个月',
|
|
|
|
+ onClick(picker) {
|
|
|
|
+ const end = new Date();
|
|
|
|
+ const start = new Date();
|
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
|
|
|
+ picker.$emit('pick', [start, end]);
|
|
|
|
+ }
|
|
|
|
+ }]
|
|
|
|
+ },
|
|
|
|
+ timeQuantum: [this.getTime(new Date(new Date().toLocaleDateString())), this.getTime(new Date())],
|
|
|
|
+
|
|
|
|
+ operateList: [{
|
|
|
|
+ type: 'add',
|
|
|
|
+ title: '添加保温箱',
|
|
|
|
+ icon: 'el-icon-plus',
|
|
|
|
+ }, {
|
|
|
|
+ type: 'import',
|
|
|
|
+ title: '冷链平台导入',
|
|
|
|
+ icon: 'el-icon-upload',
|
|
|
|
+ }],
|
|
|
|
+ formList: [{
|
|
|
|
+ type: 'input',
|
|
|
|
+ label: '名称',
|
|
|
|
+ field: 'name',
|
|
|
|
+ placeholder: '名称',
|
|
|
|
+ }, {
|
|
|
|
+ type: 'input',
|
|
|
|
+ label: 'SN',
|
|
|
|
+ field: 'sn',
|
|
|
|
+ placeholder: 'SN',
|
|
|
|
+ }, {
|
|
|
|
+ type: 'select',
|
|
|
|
+ label: '状态',
|
|
|
|
+ field: 'status',
|
|
|
|
+ placeholder: '请选择状态',
|
|
|
|
+ options: startStatus(),
|
|
|
|
+ }],
|
|
|
|
+ searchRuleForm: {
|
|
|
|
+ name: '',
|
|
|
|
+ sn: '',
|
|
|
|
+ status: '',
|
|
|
|
+ },
|
|
|
|
+ searchValue: {},
|
|
|
|
+ Pagination: {
|
|
|
|
+ PageIndex: 1,
|
|
|
|
+ PageSize: 10,
|
|
|
|
+ },
|
|
|
|
+ Total: 0,
|
|
|
|
+ tableData: [],
|
|
|
|
+ operationType: '',
|
|
|
|
+ tableList: employee(),
|
|
|
|
+ staffTitle: '添加',
|
|
|
|
+ staffDialogVisible: false,
|
|
|
|
+ formRuleList: [],
|
|
|
|
+ ruleForm: {
|
|
|
|
+ name: '',
|
|
|
|
+ sn: '',
|
|
|
|
+ status: '2',
|
|
|
|
+ },
|
|
|
|
+ confirmLoading: false,
|
|
|
|
+ selectingData: {},
|
|
|
|
+ importDialogVisible: false,
|
|
|
|
+ incubatorList: incubator(),
|
|
|
|
+ incubatorData: [],
|
|
|
|
+ Total1: 0,
|
|
|
|
+ Paginationil: {
|
|
|
|
+ PageIndex: 1,
|
|
|
|
+ PageSize: 10,
|
|
|
|
+ },
|
|
|
|
+ stateRuleList: [{
|
|
|
|
+ field: 'status',
|
|
|
|
+ label: '启用状态:',
|
|
|
|
+ placeholder: '启用状态:',
|
|
|
|
+ type: 'radio',
|
|
|
|
+ colWidth: 24,
|
|
|
|
+ rules: [{
|
|
|
|
+ required: true,
|
|
|
|
+ message: '选择启用状态:',
|
|
|
|
+ trigger: 'change'
|
|
|
|
+ }],
|
|
|
|
+ options: startStatus()
|
|
|
|
+ }],
|
|
|
|
+ stateRuleForm: {
|
|
|
|
+ status: '2',
|
|
|
|
+ },
|
|
|
|
+ nameTitle: '',
|
|
|
|
+ incubatorLoading: false,
|
|
|
|
+
|
|
|
|
+ timer: null, //定时器名称
|
|
|
|
+ dialogVisible: false,
|
|
|
|
+ waybillNo: '',
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ beforeDestroy() {
|
|
|
|
+ clearInterval(this.timer); // 清除定时器
|
|
|
|
+ this.timer = null;
|
|
|
|
+ },
|
|
|
|
+ mounted() {
|
|
|
|
+ const dataList = formRules();
|
|
|
|
+ this.formRuleList = dataList;
|
|
|
|
+ this.getList()
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ getTime(time) {
|
|
|
|
+ var date = new Date(time)
|
|
|
|
+ var y = date.getFullYear()
|
|
|
|
+ var m = date.getMonth() + 1
|
|
|
|
+ m = m < 10 ? '0' + m : m
|
|
|
|
+ var d = date.getDate()
|
|
|
|
+ d = d < 10 ? '0' + d : d
|
|
|
|
+ var h = date.getHours()
|
|
|
|
+ h = h < 10 ? '0' + h : h
|
|
|
|
+ var minute = date.getMinutes()
|
|
|
|
+ minute = minute < 10 ? '0' + minute : minute
|
|
|
|
+ var s = date.getSeconds()
|
|
|
|
+ s = s < 10 ? '0' + s : s
|
|
|
|
+ return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + s
|
|
|
|
+ },
|
|
|
|
+ // 搜索
|
|
|
|
+ searchProtocol(value) {
|
|
|
|
+ this.searchValue = value
|
|
|
|
+ this.getList()
|
|
|
|
+ },
|
|
|
|
+ // 获取运单列表
|
|
|
|
+ getList() {
|
|
|
|
+ var params = {
|
|
|
|
+ page: this.Pagination.PageIndex,
|
|
|
|
+ pageSize: this.Pagination.PageSize,
|
|
|
|
+ showTemp: true,
|
|
|
|
+ ...this.searchValue
|
|
|
|
+ }
|
|
|
|
+ getCoolerBox(params).then(res => {
|
|
|
|
+ if (res.code == 200) {
|
|
|
|
+ this.tableData = res.data.list
|
|
|
|
+ this.Total = res.data.count
|
|
|
|
+ this.timer = setTimeout(() => {
|
|
|
|
+ this.getList();
|
|
|
|
+ }, 60000)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ // 选项赋值
|
|
|
|
+ optionMatching(value, field) {
|
|
|
|
+ this.formRuleList.forEach((item, index) => {
|
|
|
|
+ if (item.field == field) {
|
|
|
|
+ item.options = value
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ // 弹窗表单添加
|
|
|
|
+ handleAdd() {
|
|
|
|
+ let flag = this.$refs['childRules'].validateForm();
|
|
|
|
+ if (flag) {
|
|
|
|
+ if (this.operationType == 'add') {
|
|
|
|
+ this.confirmLoading = true
|
|
|
|
+ var params = {
|
|
|
|
+ ...this.ruleForm
|
|
|
|
+ }
|
|
|
|
+ addCoolerBox(params).then(res => {
|
|
|
|
+ if (res.code == 200) {
|
|
|
|
+ this.$message({
|
|
|
|
+ message: '操作成功',
|
|
|
|
+ type: 'success'
|
|
|
|
+ });
|
|
|
|
+ this.getList()
|
|
|
|
+ this.staffDialogVisible = false
|
|
|
|
+ }
|
|
|
|
+ this.confirmLoading = false
|
|
|
|
+ }).catch(() => {
|
|
|
|
+ this.confirmLoading = false
|
|
|
|
+ })
|
|
|
|
+ } else if (this.operationType == 'edit') {
|
|
|
|
+ this.confirmLoading = true
|
|
|
|
+ var params = {
|
|
|
|
+ id: this.selectingData.id,
|
|
|
|
+ name: this.ruleForm.name,
|
|
|
|
+ sn: this.ruleForm.sn,
|
|
|
|
+ status: this.ruleForm.status,
|
|
|
|
+ }
|
|
|
|
+ putCoolerBox(params).then(res => {
|
|
|
|
+ if (res.code == 200) {
|
|
|
|
+ this.$message({
|
|
|
|
+ message: '操作成功',
|
|
|
|
+ type: 'success'
|
|
|
|
+ });
|
|
|
|
+ this.getList()
|
|
|
|
+ }
|
|
|
|
+ this.staffDialogVisible = false
|
|
|
|
+ this.confirmLoading = false
|
|
|
|
+ }).catch(() => {
|
|
|
|
+ this.confirmLoading = false
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ } else {
|
|
|
|
+ this.$message.error('表单信息不完整,请继续填写完整');
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ buttonData(row, type) {
|
|
|
|
+ this.selectingData = row
|
|
|
|
+ this.operationType = type
|
|
|
|
+ if (type == 'edit') {
|
|
|
|
+ this.staffTitle = '编辑'
|
|
|
|
+ this.staffDialogVisible = true
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
+ this.ruleForm = JSON.parse(JSON.stringify(row))
|
|
|
|
+ })
|
|
|
|
+ })
|
|
|
|
+ } else if (type == 'del') {
|
|
|
|
+ this.deleteUser(row.id)
|
|
|
|
+ } else if (type == 'logs') {
|
|
|
|
+ this.staffTitle = '详情'
|
|
|
|
+ this.staffDialogVisible = true
|
|
|
|
+ this.formRuleList.forEach((item, index) => {
|
|
|
|
+ item.disabled = true
|
|
|
|
+ })
|
|
|
|
+ this.ruleForm = JSON.parse(JSON.stringify(row))
|
|
|
|
+ } else if (type == 'record') {
|
|
|
|
+ this.dialogVisible = true
|
|
|
|
+ this.waybillNo = row.sn
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
+ this.$refs.thermo.getProbe()
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // 选择时间
|
|
|
|
+ timeChange() {
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
+ this.$refs.thermo.getTemperature()
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ openModel(type) {
|
|
|
|
+ if (type == 'add') {
|
|
|
|
+ this.staffTitle = '添加'
|
|
|
|
+ this.staffDialogVisible = true
|
|
|
|
+ this.operationType = type
|
|
|
|
+ } else if (type == 'import') {
|
|
|
|
+ this.importDialogVisible = true
|
|
|
|
+ this.getDeviceList()
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // 获取设备列表
|
|
|
|
+ getDeviceList() {
|
|
|
|
+ var params = {
|
|
|
|
+ page: this.Paginationil.PageIndex,
|
|
|
|
+ pageSize: this.Paginationil.PageSize,
|
|
|
|
+ name: this.nameTitle,
|
|
|
|
+ }
|
|
|
|
+ getDevice(params).then(res => {
|
|
|
|
+ if (res.code == 200) {
|
|
|
|
+ this.incubatorData = res.data.list
|
|
|
|
+ this.Total1 = res.data.count
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ // 搜索保温箱
|
|
|
|
+ incubatorInput(value) {
|
|
|
|
+ this.nameTitle = value
|
|
|
|
+ this.getDeviceList()
|
|
|
|
+ },
|
|
|
|
+ // 批量导入保温箱
|
|
|
|
+ incubatorAdd() {
|
|
|
|
+ const arrID = this.$refs.refIncubator.waybillIds
|
|
|
|
+ let arr1 = []
|
|
|
|
+ arrID.forEach(item => {
|
|
|
|
+ let arr2 = {
|
|
|
|
+ sn: item.T_sn,
|
|
|
|
+ name: item.T_devName,
|
|
|
|
+ }
|
|
|
|
+ arr1.push(arr2)
|
|
|
|
+ })
|
|
|
|
+ let flag = this.$refs['incubatorRules'].validateForm();
|
|
|
|
+ if (flag) {
|
|
|
|
+ if (arr1.length > 0) {
|
|
|
|
+ this.incubatorLoading = true
|
|
|
|
+ let params = {
|
|
|
|
+ list: arr1,
|
|
|
|
+ ...this.stateRuleForm,
|
|
|
|
+ }
|
|
|
|
+ addCoolerBoxImport(params).then(res => {
|
|
|
|
+ if (res.code == 200) {
|
|
|
|
+ this.$message({
|
|
|
|
+ message: '操作成功',
|
|
|
|
+ type: 'success'
|
|
|
|
+ });
|
|
|
|
+ this.getList()
|
|
|
|
+ this.importDialogVisible = false
|
|
|
|
+ }
|
|
|
|
+ this.incubatorLoading = false
|
|
|
|
+ })
|
|
|
|
+ } else {
|
|
|
|
+ this.$message.warning('请选择需要导入的保温箱');
|
|
|
|
+ }
|
|
|
|
+ } else {
|
|
|
|
+ this.$message.error('表单信息不完整,请继续填写完整');
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // 删除保温箱
|
|
|
|
+ deleteUser(id) {
|
|
|
|
+ this.$confirm('此操作将永久删除该保温箱, 是否继续?', '提示', {
|
|
|
|
+ confirmButtonText: '确定',
|
|
|
|
+ cancelButtonText: '取消',
|
|
|
|
+ type: 'warning'
|
|
|
|
+ }).then(() => {
|
|
|
|
+ delCoolerBox({
|
|
|
|
+ id: id,
|
|
|
|
+ }).then(res => {
|
|
|
|
+ if (res.code == 200) {
|
|
|
|
+ this.$message({
|
|
|
|
+ message: '操作成功',
|
|
|
|
+ type: 'success'
|
|
|
|
+ });
|
|
|
|
+ const precisePage = Math.ceil((this.Total - 1) / this.Pagination.PageSize)
|
|
|
|
+ this.Pagination.PageIndex = this.Pagination.PageIndex > precisePage ? precisePage : this
|
|
|
|
+ .Pagination.PageIndex
|
|
|
|
+ this.Pagination.PageIndex = this.Pagination.PageIndex < 1 ? 1 : this.Pagination.PageIndex
|
|
|
|
+ this.getList()
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }).catch(() => {});
|
|
|
|
+ },
|
|
|
|
+ changeSize(val) {
|
|
|
|
+ this.Pagination.PageSize = val
|
|
|
|
+ this.getList()
|
|
|
|
+ },
|
|
|
|
+ changeCurrent(val) {
|
|
|
|
+ this.Pagination.PageIndex = val
|
|
|
|
+ this.getList()
|
|
|
|
+ },
|
|
|
|
+ changeSizeil(val) {
|
|
|
|
+ this.Paginationil.PageSize = val
|
|
|
|
+ this.getDeviceList()
|
|
|
|
+ },
|
|
|
|
+ changeCurrentil(val) {
|
|
|
|
+ this.Paginationil.PageIndex = val
|
|
|
|
+ this.getDeviceList()
|
|
|
|
+ },
|
|
|
|
+ // 清空表单
|
|
|
|
+ closeDialog() {
|
|
|
|
+ this.formRuleList.forEach((item, index) => {
|
|
|
|
+ item.disabled = false
|
|
|
|
+ })
|
|
|
|
+ this.ruleForm = {}
|
|
|
|
+ this.$refs.childRules.resetCheck();
|
|
|
|
+ },
|
|
|
|
+ // 关闭温湿度记录
|
|
|
|
+ temperatureClose() {
|
|
|
|
+ this.timeQuantum = [this.getTime(new Date(new Date().toLocaleDateString())), this.getTime(new Date())]
|
|
|
|
+ },
|
|
|
|
+ closeDialogil() {
|
|
|
|
+ this.$refs.incubatorRules.resetCheck();
|
|
|
|
+ this.$refs.refIncubator.clearSelected();
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
+ .card_check_title {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .icon_import {
|
|
|
|
+ margin-right: 5px;
|
|
|
|
+ font-size: 20px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .card_import {
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .management_card ::v-deep .el-dialog__body {
|
|
|
|
+ padding: 0px 20px !important;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .card_incubat .el-form-item {
|
|
|
|
+ margin-bottom: 5px !important;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .card_search_input {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ margin-bottom: 5px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .title_search {
|
|
|
|
+ flex: none;
|
|
|
|
+ margin-right: 5px;
|
|
|
|
+ }
|
|
|
|
+</style>
|