2019/07/10

src/main/java/com/izouma/awesomeadmin/service/AppealInfoService.java

@@ -25,5 +25,8 @@ public interface AppealInfoService {
 
     boolean updateAppealInfo(AppealInfo record);
     /*generatedEnd*/
+
+    boolean finish(AppealInfo record);
+
 }
 

src/main/java/com/izouma/awesomeadmin/service/impl/AppealInfoServiceImpl.java

@@ -1,19 +1,18 @@
 package com.izouma.awesomeadmin.service.impl;
 
-import com.izouma.awesomeadmin.constant.AppConstant;
-import com.izouma.awesomeadmin.dao.AppealInfoMapper;
+import java.math.BigDecimal;
+import java.util.*;
+
 import com.izouma.awesomeadmin.dao.PlayerInfoMapper;
-import com.izouma.awesomeadmin.dto.Page;
-import com.izouma.awesomeadmin.model.AppealInfo;
 import com.izouma.awesomeadmin.model.PlayerInfo;
-import com.izouma.awesomeadmin.service.AppealInfoService;
 import org.apache.log4j.Logger;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
-
-import java.util.HashMap;
-import java.util.List;
-import java.util.Map;
+import com.izouma.awesomeadmin.constant.AppConstant;
+import com.izouma.awesomeadmin.dto.Page;
+import com.izouma.awesomeadmin.model.AppealInfo;
+import com.izouma.awesomeadmin.service.AppealInfoService;
+import com.izouma.awesomeadmin.dao.AppealInfoMapper;
 
 /**
  * service接口实现类
@@ -125,6 +124,18 @@ public class AppealInfoServiceImpl implements AppealInfoService {
         }
         return false;
     }
+
     /*generatedEnd*/
+
+    @Override
+    public boolean finish(AppealInfo record) {
+        logger.info("finish");
+        try {
+            return updateAppealInfo(record);
+        } catch (Exception e) {
+            logger.error("finish", e);
+        }
+        return false;
+    }
 }
 

src/main/java/com/izouma/awesomeadmin/web/AppealInfoController.java

@@ -1,24 +1,21 @@
 package com.izouma.awesomeadmin.web;
 
+import java.util.*;
+
+import com.izouma.awesomeadmin.util.ExportExcelUtil;
+import org.apache.commons.lang.StringUtils;
+import org.apache.shiro.authz.annotation.RequiresAuthentication;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.*;
 import com.izouma.awesomeadmin.constant.AppConstant;
 import com.izouma.awesomeadmin.dto.Page;
 import com.izouma.awesomeadmin.dto.Result;
 import com.izouma.awesomeadmin.model.AppealInfo;
 import com.izouma.awesomeadmin.service.AppealInfoService;
-import com.izouma.awesomeadmin.util.ExportExcelUtil;
-import org.apache.shiro.authz.annotation.RequiresAuthentication;
-import org.springframework.beans.factory.annotation.Autowired;
-import org.springframework.stereotype.Controller;
-import org.springframework.web.bind.annotation.RequestMapping;
-import org.springframework.web.bind.annotation.RequestMethod;
-import org.springframework.web.bind.annotation.RequestParam;
-import org.springframework.web.bind.annotation.ResponseBody;
 
 import javax.servlet.http.HttpServletRequest;
 import javax.servlet.http.HttpServletResponse;
-import java.util.HashMap;
-import java.util.List;
-import java.util.Map;
 
 @Controller
 @RequestMapping("/appealInfo")
@@ -68,7 +65,7 @@ public class AppealInfoController {
     public Result save(AppealInfo record) {
         boolean num = appealInfoService.createAppealInfo(record);
         if (num) {
-        return new Result(true, record.getId());
+            return new Result(true, record.getId());
         }
         return new Result(false, "保存异常");
     }
@@ -78,7 +75,7 @@ public class AppealInfoController {
     public Result updateAppealInfo(AppealInfo record) {
         boolean num = appealInfoService.updateAppealInfo(record);
         if (num) {
-        return new Result(true, "保存成功");
+            return new Result(true, "保存成功");
         }
         return new Result(false, "保存异常");
     }
@@ -89,7 +86,7 @@ public class AppealInfoController {
 
         boolean num = appealInfoService.deleteAppealInfo(record);
         if (num) {
-        return new Result(true, "删除成功");
+            return new Result(true, "删除成功");
         }
         return new Result(false, "删除异常");
     }
@@ -109,21 +106,31 @@ public class AppealInfoController {
         String[][] dataList = new String[appealInfos.size()][10];
 
         for (int i = 0; i < appealInfos.size(); i++) {
-                        dataList[i][0] = String.valueOf(appealInfos.get(i).getId());
-                        dataList[i][1] = String.valueOf(appealInfos.get(i).getDelFlag());
-                        dataList[i][2] = String.valueOf(appealInfos.get(i).getUserId());
-                        dataList[i][3] = String.valueOf(appealInfos.get(i).getPlayerInfoId());
-                        dataList[i][4] = String.valueOf(appealInfos.get(i).getCompetitionId());
-                        dataList[i][5] = String.valueOf(appealInfos.get(i).getHouseId());
-                        dataList[i][6] = String.valueOf(appealInfos.get(i).getPic());
-                        dataList[i][7] = String.valueOf(appealInfos.get(i).getStatus());
-                        dataList[i][8] = String.valueOf(appealInfos.get(i).getPoints());
-                        dataList[i][9] = String.valueOf(appealInfos.get(i).getCreateTime());
-                    }
+            dataList[i][0] = String.valueOf(appealInfos.get(i).getId());
+            dataList[i][1] = String.valueOf(appealInfos.get(i).getDelFlag());
+            dataList[i][2] = String.valueOf(appealInfos.get(i).getUserId());
+            dataList[i][3] = String.valueOf(appealInfos.get(i).getPlayerInfoId());
+            dataList[i][4] = String.valueOf(appealInfos.get(i).getCompetitionId());
+            dataList[i][5] = String.valueOf(appealInfos.get(i).getHouseId());
+            dataList[i][6] = String.valueOf(appealInfos.get(i).getPic());
+            dataList[i][7] = String.valueOf(appealInfos.get(i).getStatus());
+            dataList[i][8] = String.valueOf(appealInfos.get(i).getPoints());
+            dataList[i][9] = String.valueOf(appealInfos.get(i).getCreateTime());
+        }
 
         ExportExcelUtil.ExportWithResponse(sheetName, titleName, fileName,
                 columnNumber, columnWidth, columnName, dataList, response);
     }
     /*generatedEnd*/
+
+    @RequestMapping(value = "/finish", method = RequestMethod.POST)
+    @ResponseBody
+    public Result finish(AppealInfo record) {
+        boolean num = appealInfoService.finish(record);
+        if (num) {
+            return new Result(true, "保存成功");
+        }
+        return new Result(false, "保存异常");
+    }
 }
 

src/main/vue/src/pages/AppealInfos.vue

@@ -1,107 +1,83 @@
 <template>
     <div>
         <div class="filters-container">
-        
-            <el-input placeholder="关键字" size="small" v-model="filter1" clearable class="filter-item"></el-input>
-            <el-button @click="searchData" type="primary" size="small" icon="el-icon-search" class="filter-item">搜索
-            </el-button>
-            <el-button @click="showAdvancedQueryDialog = !showAdvancedQueryDialog" type="primary" size="small"
-                       icon="el-icon-search" class="filter-item">高级查询
-            </el-button>
-            <el-button @click="showTableSortDialog = !showTableSortDialog" type="primary" size="small"
-                       icon="el-icon-sort" class="filter-item">排序
-            </el-button>
-            <el-button @click="$router.push({path:'/appealInfo',query:{column:$route.query.column}})" type="primary"
-                       size="small" icon="el-icon-edit"
-                       class="filter-item">添加
-            </el-button>
-            <el-button @click="exportExcel" type="primary" size="small" icon="el-icon-share" class="filter-item">导出EXCEL
-            </el-button>
-            <el-dropdown trigger="click" size="medium" class="table-column-filter">
-                <span>
-                  筛选数据<i class="el-icon-arrow-down el-icon--right"></i>
-                </span>
-                <el-dropdown-menu slot="dropdown" class="table-column-filter-wrapper">
-                    <el-checkbox v-for="item in tableColumns" :key="item.value" v-model="item.show">{{item.label}}
-                    </el-checkbox>
-                </el-dropdown-menu>
-            </el-dropdown>
+            <el-select class="filters" v-model="status" size="small">
+                <el-option :value="-1" label="全部"></el-option>
+                <el-option :value="0" label="未处理"></el-option>
+                <el-option :value="1" label="已处理"></el-option>
+            </el-select>
         </div>
         <el-table
-                :data="tableData"
-                :height="tableHeight"
-                row-key="id"
-                ref="table">
+            :data="tableData"
+            :height="tableHeight"
+            row-key="id"
+            ref="table">
             <el-table-column
-                    v-if="multipleMode"
-                    align="center"
-                    type="selection"
-                    width="50">
+                type="index"
+                min-width="50"
+                align="center">
             </el-table-column>
+
+            <el-table-column
+                prop="userId"
+                label="用户id"
+                width="100">
+            </el-table-column>
+
+            <el-table-column
+                prop="userInfo.nickname"
+                label="用户名"
+
+                min-width="100">
+            </el-table-column>
+
+            <el-table-column
+                prop="playerInfoId"
+                label="参赛id"
+                width="100">
+            </el-table-column>
+
+            <el-table-column
+                prop="houseId"
+                label="房间id"
+                width="100">
+            </el-table-column>
+
+            <el-table-column
+                prop="houseInfo.houseName"
+                label="房间名"
+                min-width="100">
+            </el-table-column>
+
+            <el-table-column
+                prop="status"
+                label="状态"
+                :formatter="statusFormatter"
+                min-width="100">
+            </el-table-column>
+
+            <el-table-column
+                prop="points"
+                label="补发积分"
+                min-width="100">
+            </el-table-column>
+
             <el-table-column
-                    type="index"
-                    min-width="50"
-                    align="center">
+                prop="createTime"
+                label="创建时间"
+                :formatter="DateTimeFormatter"
+                min-width="100">
             </el-table-column>
-                                                                                    
-                                            <el-table-column
-                                v-if="isColumnShow('userId')"
-                                prop="userId"
-                                label="用户id"
-                                min-width="100">
-                        </el-table-column>
-                                                                
-                                            <el-table-column
-                                v-if="isColumnShow('playerInfoId')"
-                                prop="playerInfoId"
-                                label="参赛id"
-                                min-width="100">
-                        </el-table-column>
-                                                                
-                                            <el-table-column
-                                v-if="isColumnShow('competitionId')"
-                                prop="competitionId"
-                                label="赛事id"
-                                min-width="100">
-                        </el-table-column>
-                                                                
-                                            <el-table-column
-                                v-if="isColumnShow('houseId')"
-                                prop="houseId"
-                                label="房间id"
-                                min-width="100">
-                        </el-table-column>
-                                                                                            
-                                            <el-table-column
-                                v-if="isColumnShow('status')"
-                                prop="status"
-                                label="状态"
-                                min-width="100">
-                        </el-table-column>
-                                                                
-                                            <el-table-column
-                                v-if="isColumnShow('points')"
-                                prop="points"
-                                label="补发积分"
-                                min-width="100">
-                        </el-table-column>
-                                                                
-                                            <el-table-column
-                                v-if="isColumnShow('createTime')"
-                                prop="createTime"
-                                label="创建时间"
-                                :formatter="DateTimeFormatter"
-                                min-width="100">
-                        </el-table-column>
-                                                            <el-table-column
-                    label="操作"
-                    align="center"
-                    fixed="right"
-                    min-width="150"
-            >
+            <el-table-column
+                label="操作"
+                align="center"
+                fixed="right"
+                min-width="150">
                 <template slot-scope="scope">
-                                        <el-button @click="editRow(scope.row)" type="primary" size="mini" plain>编辑</el-button>
-                    <el-button @click="deleteRow(scope.row)" type="danger" size="mini" plain>删除</el-button>
+                    <el-button @click="view(scope.row)" type="primary" size="mini" plain v-if="scope.row.status===0">
+                        查看
+                    </el-button>
+                    <el-button @click="editRow(scope.row)" type="primary" size="mini" plain v-else>编辑</el-button>
                 </template>
             </el-table-column>
         </el-table>
@@ -115,105 +91,50 @@
                 </el-button-group>
             </div>
             <el-pagination
-                    background
-                    @size-change="pageSizeChange"
-                    @current-change="currentPageChange"
-                    :current-page="currentPage"
-                    :page-sizes="[10, 20, 30, 40, 50]"
-                    :page-size="pageSize"
-                    layout="total, sizes, prev, pager, next, jumper"
-                    :total="totalNumber">
+                background
+                @size-change="pageSizeChange"
+                @current-change="currentPageChange"
+                :current-page="currentPage"
+                :page-sizes="[10, 20, 30, 40, 50]"
+                :page-size="pageSize"
+                layout="total, sizes, prev, pager, next, jumper"
+                :total="totalNumber">
             </el-pagination>
         </div>
-        <el-dialog title="高级查询" :visible.sync="showAdvancedQueryDialog">
-            <el-button @click="addField" type="text" icon="el-icon-plus">添加</el-button>
-            <el-table :data="advancedQueryFields">
-
-                <el-table-column prop="link" label="链接符" align="center">
-                    <template slot-scope="{row}">
-                        <el-select placeholder="链接" size="small" v-model="row.link" class="filter-item">
-                            <el-option label="AND" value="AND">
-                            </el-option>
-                            <el-option label="OR" value="OR">
-                            </el-option>
-                        </el-select>
-                    </template>
-                </el-table-column>
-                <el-table-column prop="name" label="字段" align="center">
-                    <template slot-scope="{row}">
-                        <el-select v-model="row.name">
-
-                            <el-option v-for="item in advancedQueryColumns" :label="item.label" :value="item.value"
-                                       :key="item.value"></el-option>
-                        </el-select>
-                    </template>
-                </el-table-column>
-                <el-table-column prop="searchMethod" label="搜索方式" width="150" align="center">
-                    <template slot-scope="{row}">
-                        <el-select v-model="row.searchMethod">
-                            <el-option v-for="item in searchMethods" :label="item" :value="item"
-                                       :key="item"></el-option>
-                        </el-select>
-                    </template>
-                </el-table-column>
-                <el-table-column prop="value" label="参数" align="center">
-                    <template slot-scope="{row}">
-                        <el-input v-model="row.value"></el-input>
-                    </template>
-                </el-table-column>
-                <el-table-column width="60" align="center">
-                    <template slot-scope="{ row, column, $index }">
-                        <el-button @click="removeField($index)" size="small" type="text">删除</el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
-
-            <span slot="footer" class="dialog-footer">
-
-                <el-button @click="advancedQuery" :loading="$store.state.fetchingData">确定</el-button>
-            </span>
-        </el-dialog>
-
-        <el-dialog title="排序" :visible.sync="showTableSortDialog">
-            <el-button @click="addSortField" type="text" icon="el-icon-plus">添加</el-button>
-            <el-table :data="tableSortFields">
-
-                <el-table-column prop="name" label="字段" align="center">
-                    <template slot-scope="{row}">
-                        <el-select v-model="row.name">
 
-                            <el-option v-for="item in advancedQueryColumns" :label="item.label" :value="item.value"
-                                       :key="item.value"></el-option>
-                        </el-select>
-                    </template>
-                </el-table-column>
-                <el-table-column prop="order" label="排序" align="center">
-                    <template slot-scope="{row}">
-                        <el-select v-model="row.order">
-                            <el-option label="降序" value="desc">
-                            </el-option>
-                            <el-option label="升序" value="asc">
-                            </el-option>
-                        </el-select>
-                    </template>
-                </el-table-column>
-                <el-table-column width="60" align="center">
-                    <template slot-scope="{ row, column, $index }">
-                        <el-button @click="removeSortField($index)" size="small" type="text">删除</el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
-
-            <span slot="footer" class="dialog-footer">
-
-                <el-button @click="tableSortQuery" :loading="$store.state.fetchingData">确定</el-button>
+        <el-dialog :visible.sync="showDialog">
+            <el-form label-position="left" inline class="appeal-form" size="small">
+                <el-form-item label="用户ID">
+                    {{appealInfo.userId}}
+                </el-form-item>
+                <el-form-item label="用户名">
+                    {{appealInfo.userInfo?appealInfo.userInfo.nickname:''}}
+                </el-form-item>
+                <el-form-item label="房间ID">
+                    {{appealInfo.houseId}}
+                </el-form-item>
+                <el-form-item label="房间名">
+                    {{appealInfo.houseInfo?appealInfo.houseInfo.houseName:''}}
+                </el-form-item>
+                <el-form-item label="参赛ID">
+                    {{appealInfo.palyerInfoId}}
+                </el-form-item>
+                <el-form-item label="状态">
+                    {{statusFormatter('','',appealInfo.status)}}
+                </el-form-item>
+                <el-form-item label="截图" style="display: block; width: 100%;">
+                    <a style="width: 50%;display: inline-block;" :href="item" v-for="item in pic" target="_blank"><img
+                        :src="item" style="width: 100%;"></a>
+                </el-form-item>
+                <el-form-item label="补发积分">
+                    <el-input-number v-model="points"></el-input-number>
+                </el-form-item>
+            </el-form>
+            <span slot="footer">
+                <el-button @click="showDialog=false" size="small">取消</el-button>
+                 <el-button @click="finish" size="small" type="primary">已处理</el-button>
             </span>
         </el-dialog>
-
-        <el-dialog title="查看图片" :visible.sync="imageDialogVisible" size="small">
-            <img width="100%" :src="imgSrc" alt="">
-        </el-dialog>
-
     </div>
 </template>
 <script>
@@ -233,91 +154,22 @@
                 currentPage: 1,
                 pageSize: 20,
                 tableData: [],
-                filter1: '',
-                filter2: '',
-                tableColumns: [
-                                                                                                                                                                {
-                                label: '用户id',
-                                value: 'userId',
-                                show: true
-                            },
-                                                                                                {
-                                label: '参赛id',
-                                value: 'playerInfoId',
-                                show: true
-                            },
-                                                                                                {
-                                label: '赛事id',
-                                value: 'competitionId',
-                                show: true
-                            },
-                                                                                                {
-                                label: '房间id',
-                                value: 'houseId',
-                                show: true
-                            },
-                                                                                                                                            {
-                                label: '状态',
-                                value: 'status',
-                                show: true
-                            },
-                                                                                                {
-                                label: '补发积分',
-                                value: 'points',
-                                show: true
-                            },
-                                                                                                {
-                                label: '创建时间',
-                                value: 'createTime',
-                                show: true
-                            },
-                                                            ],
-                multipleMode: false,
-                showAdvancedQueryDialog: false,
-                advancedQueryFields: [],
-                showTableSortDialog: false,
-                tableSortFields: [],
-                searchMethods: ['=', '!=', '>', '>=', '<', '<=', 'like'],
-                advancedQueryColumns: [
-                                                                                                                                                                {
-                                label: '用户id',
-                                value: 'user_id'
-                            },
-                                                                                                {
-                                label: '参赛id',
-                                value: 'player_info_id'
-                            },
-                                                                                                {
-                                label: '赛事id',
-                                value: 'competition_id'
-                            },
-                                                                                                {
-                                label: '房间id',
-                                value: 'house_id'
-                            },
-                                                                                                                                            {
-                                label: '状态',
-                                value: 'status'
-                            },
-                                                                                                {
-                                label: '补发积分',
-                                value: 'points'
-                            },
-                                                                                                {
-                                label: '创建时间',
-                                value: 'create_time'
-                            },
-                                                            ],
-                advancedQuerySearchKey: '',
-                orderByStr: '',
-                imgSrc: '',
-                imageDialogVisible: false,
+                status: 0,
+                showDialog: false,
+                appealInfo: {},
+                points: 0
             }
         },
         computed: {
             ...mapState(['tableHeight']),
             selection() {
                 return this.$refs.table.selection.map(i => i.id);
+            },
+            pic() {
+                if (this.appealInfo && this.appealInfo.pic) {
+                    return this.appealInfo.pic.split(',')
+                }
+                return []
             }
         },
         methods: {
@@ -331,13 +183,16 @@
                 this.getData();
             },
             getData() {
-
                 var data = {
                     currentPage: this.currentPage,
                     pageNumber: this.pageSize,
                     searchKey: this.filter1,
                     advancedQuery: this.advancedQuerySearchKey,
                     orderByStr: this.orderByStr,
+                };
+
+                if (this.status !== -1) {
+                    data.status = this.status;
                 }
 
                 if (this.$route.query.column) {
@@ -355,15 +210,10 @@
                     }
                 })
             },
-            isColumnShow(column) {
-                var row = this.tableColumns.find(i => i.value === column);
-                return row ? row.show : false;
-            },
-            toggleMultipleMode(multipleMode) {
-                this.multipleMode = multipleMode;
-                if (!multipleMode) {
-                    this.$refs.table.clearSelection();
-                }
+            view(row) {
+                this.appealInfo = row;
+                this.points = 0;
+                this.showDialog = true;
             },
             editRow(row) {
                 this.$router.push({
@@ -374,95 +224,6 @@
                     }
                 })
             },
-            operation1() {
-                this.$notify({
-                    title: '提示',
-                    message: this.selection
-                });
-            },
-            operation2() {
-                this.$message('操作2');
-            },
-            addField() {
-                this.advancedQueryFields.push({
-                    link: 'AND',
-                    name: '',
-                    searchMethod: '=',
-                    value: '',
-                });
-            },
-            removeField(i) {
-                if (this.advancedQueryFields.length > 0) {
-                    this.advancedQueryFields.splice(i, 1);
-                }
-            },
-            advancedQuery() {
-
-                this.advancedQuerySearchKey = '';
-
-                if (this.advancedQueryFields.length > 0) {
-
-                    var templist = [];
-
-                    this.advancedQueryFields.forEach(item => {
-                        if (item.link && item.name && item.searchMethod && item.value) {
-                            var tempItem = item.link + '_,' + item.name + '_,' + item.searchMethod + '_,' + item.value;
-                            templist.push(tempItem);
-                        }
-                    })
-
-                    if (templist.length > 0) {
-
-                        this.advancedQuerySearchKey = templist.join('_;');
-                    }
-                }
-
-                this.getData();
-                this.showAdvancedQueryDialog = false;
-            },
-            addSortField() {
-                this.tableSortFields.push({
-                    name: '',
-                    order: 'asc',
-                });
-            },
-            removeSortField(i) {
-                if (this.tableSortFields.length > 0) {
-                    this.tableSortFields.splice(i, 1);
-                }
-            },
-            tableSortQuery() {
-
-                this.orderByStr = '';
-
-                if (this.tableSortFields.length > 0) {
-
-                    var templist = [];
-
-                    this.tableSortFields.forEach(item => {
-                        if (item.name && item.order) {
-                            var tempItem = item.name + '_,' + item.order;
-                            templist.push(tempItem);
-                        }
-                    })
-
-                    if (templist.length > 0) {
-
-                        this.orderByStr = templist.join('_;');
-                    }
-                }
-
-                this.getData();
-                this.showTableSortDialog = false;
-            },
-            exportExcel() {
-                window.location.href = this.$baseUrl + "/appealInfo/exportExcel?searchKey="
-                        + this.filter1 + "&advancedQuery=" + this.advancedQuerySearchKey+"&orderByStr=" + this.orderByStr;
-            },
-            searchData() {
-                this.currentPage = 1;
-                this.getData();
-            },
             deleteRow(row) {
                 this.$alert('删除将无法恢复，确认要删除么？', '警告', {type: 'error'}).then(() => {
                     return this.$http.post({
@@ -496,10 +257,46 @@
                 this.imgSrc = img;
                 this.imageDialogVisible = true;
             },
+            statusFormatter(row, column, cellValue, index) {
+                switch (cellValue) {
+                    case 0:
+                        return '待处理'
+                    case 1:
+                        return '已处理'
+                }
+            },
+            finish() {
+                this.$confirm('确定？').then(() => {
+                    this.showDialog = false;
+                    this.$http.post({
+                        url: 'appealInfo/finish',
+                        data: {
+                            id: this.appealInfo.id,
+                            status: 1,
+                            points: this.points
+                        }
+                    }).then(res => {
+                        this.getData();
+                    })
+                })
+            }
 
+        },
+        watch: {
+            status() {
+                this.getData();
+            }
         }
     }
 </script>
 <style lang="less" scoped>
+    .appeal-form {
+        font-size: 0;
 
+        .el-form-item {
+            margin-right: 0;
+            margin-bottom: 0;
+            width: 50%;
+        }
+    }
 </style>