todo:pdf预览

ruoyi-system/src/main/java/com/ruoyi/system/fantang/controller/FtPrepaymentDaoController.java

@@ -1,5 +1,6 @@
 package com.ruoyi.system.fantang.controller;
 
+import com.alibaba.fastjson.JSONObject;
 import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
 import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
 import com.baomidou.mybatisplus.core.toolkit.Wrappers;
@@ -17,6 +18,13 @@ import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.security.access.prepost.PreAuthorize;
 import org.springframework.web.bind.annotation.*;
 
+import javax.servlet.ServletOutputStream;
+import javax.servlet.http.HttpServletRequest;
+import javax.servlet.http.HttpServletResponse;
+import java.io.File;
+import java.io.FileInputStream;
+import java.io.IOException;
+import java.net.URLEncoder;
 import java.util.Arrays;
 import java.util.Date;
 import java.util.List;
@@ -59,7 +67,7 @@ public class FtPrepaymentDaoController extends BaseController {
 //            return AjaxResult.error("无该记录");
 //        return AjaxResult.success("操作成功", dao);
         FtPrepaymentDao ftPrepaymentDao = iFtPrepaymentDaoService.getByPatientId(patientId);
-        if (ftPrepaymentDao == null){
+        if (ftPrepaymentDao == null) {
             return AjaxResult.error("无该记录");
         }
         return AjaxResult.success("操作成功", ftPrepaymentDao);
@@ -76,7 +84,7 @@ public class FtPrepaymentDaoController extends BaseController {
     // 查询所有已缴费列表
     @PreAuthorize("@ss.hasPermi('fantang:prepayment:list')")
     @GetMapping("/listPrepay")
-    public AjaxResult listPrepay(@RequestParam("pageNum")Integer pageNum, @RequestParam("pageSize")Integer pageSize) {
+    public AjaxResult listPrepay(@RequestParam("pageNum") Integer pageNum, @RequestParam("pageSize") Integer pageSize) {
         return AjaxResult.success(iFtPrepaymentDaoService.listPrepay(pageNum, pageSize));
     }
 
@@ -177,4 +185,33 @@ public class FtPrepaymentDaoController extends BaseController {
     public AjaxResult remove(@PathVariable Long[] prepaymentIds) {
         return toAjax(iFtPrepaymentDaoService.removeByIds(Arrays.asList(prepaymentIds)) ? 1 : 0);
     }
+
+    @GetMapping("/generateReceiptPdf")
+    public void generateReceiptPdf(HttpServletRequest request, HttpServletResponse response) throws IOException {
+
+        //根据文件信息中文件名字 和 文件存储路径获取文件输入流
+        String realpath = "E:\\Dev\\jmfx_1\\fantang\\ruoyi-ui\\src\\assets\\images\\login-background.jpg";
+        //PDF文件地址
+        File file = new File(realpath);
+        if (file.exists()) {
+            byte[] data = null;
+            FileInputStream input=null;
+            try {
+                input= new FileInputStream(file);
+                data = new byte[input.available()];
+                input.read(data);
+                response.getOutputStream().write(data);
+            } catch (Exception e) {
+                System.out.println("pdf文件处理异常：" + e);
+            }finally{
+                try {
+                    if(input!=null){
+                        input.close();
+                    }
+                } catch (IOException e) {
+                    e.printStackTrace();
+                }
+            }
+        }
+    }
 }

ruoyi-ui/src/api/fantang/prepayment.js

@@ -101,3 +101,11 @@ export function exportPrepayment(query) {
     params: query
   })
 }
+
+export function generateReceiptPdf(data) {
+  return request({
+    url: '/fantang/prepayment/generateReceiptPdf',
+    method: 'get',
+    data: data
+  })
+}

ruoyi-ui/src/views/fantang/careStaffInfo/index.vue

@@ -179,7 +179,7 @@ import {
   updateNursingInfo,
 } from "@/api/fantang/staffInfo";
 import {listDepart} from "@/api/fantang/depart";
-import UploadImage from '@/components/UploadImage';
+import UploadImage from '../../../components/UploadImage';
 
 export default {
   name: "StaffInfo",

ruoyi-ui/src/views/fantang/prepayment/index.vue

@@ -43,30 +43,6 @@
       </el-form-item>
     </el-form>
 
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['fantang:prepayment:add']"
-        >预付收款
-        </el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['fantang:prepayment:export']"
-        >导出
-        </el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
     <el-table v-loading="loading" :data="prepaymentList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center"/>
       <el-table-column label="预付费id" align="center" prop="prepaymentId" v-if="false"/>
@@ -76,23 +52,36 @@
       <el-table-column label="科室" align="center" prop="departName" width="180">
       </el-table-column>
       <el-table-column label="床号" align="center" prop="bedId"/>
-      <el-table-column label="预付款余额" align="center" prop="prepaid" />
+      <el-table-column label="预付款余额" align="center" prop="prepaid"/>
-<!--      <el-table-column label="结算时间" align="center" prop="settlementAt" width="180">-->
-<!--        <template slot-scope="scope">-->
-<!--          <span>{{ parseTime(scope.row.settlementAt, '{y}-{m}-{d}') }}</span>-->
-<!--        </template>-->
-<!--      </el-table-column>-->
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button
             size="mini"
             type="text"
-            icon="el-icon-news"
+            icon="el-icon-s-claim"
             @click="handleUpdate(scope.row)"
             v-hasPermi="['fantang:prepayment:remove']"
-            v-if=""
+            v-if="scope.row.noPrepayment"
           >出院结清
           </el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-printer"
+            @click="handleGenerateReceiptPdf(scope.row)"
+            v-hasPermi="['fantang:prepayment:remove']"
+            v-if="scope.row.noPrepayment"
+          >打印
+          </el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-money"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['fantang:prepayment:remove']"
+            v-if="!scope.row.noPrepayment"
+          >收款
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -125,9 +114,9 @@
               <span class="addr">
                 {{ item.departName }}
                 <el-divider direction="vertical"></el-divider>
-                {{ item.bedId}}
+                {{ item.bedId }}
                 <el-divider direction="vertical"></el-divider>
-                {{ item.value}}
+                {{ item.value }}
               </span>
             </template>
           </el-autocomplete>
@@ -139,7 +128,7 @@
           <el-input v-model="formAddPrepayment.prepaid"
                     onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))" type="number"
                     placeholder="请输入预付费金额"
-                    style="width: 250px" />
+                    style="width: 250px"/>
         </el-form-item>
         <el-form-item label="预付费时间" prop="prepaidAt">
           <el-date-picker clearable size="small" style="width: 250px"
@@ -164,7 +153,7 @@ import {
   addPrepayment,
   delPrepayment,
   exportPrepayment,
-  getCountById,
+  generateReceiptPdf,
   getPrepayment,
   listNoPrepayment,
   listPrepay
@@ -172,307 +161,323 @@ import {
 import {getUserProfile} from "../../../api/system/user";
 
 export default {
-    name: "Prepayment",
+  name: "Prepayment",
-    components: {},
+  components: {},
-    data() {
+  data() {
-      return {
+    return {
-        // 权限相关的参数
+      // 权限相关的参数
-        user: null,
+      user: null,
-        roleGroup: null,
+      roleGroup: null,
-        postGroup: null,
+      postGroup: null,
 
-        settlementFlagOptions: [{
+      settlementFlagOptions: [{
-          value: 0,
+        value: 0,
-          label: '已缴费'
+        label: '已缴费'
-        }, {
+      }, {
-          value: 1,
+        value: 1,
-          label: '未交费'
+        label: '未交费'
-        }],
+      }],
-        suggestionList: [],
+      suggestionList: [],
-        NoPrepayments: [],
+      NoPrepayments: [],
-        state: '',
+      state: '',
-        // 遮罩层
+      // 遮罩层
-        loading: true,
+      loading: true,
-        // 选中数组
+      // 选中数组
-        ids: [],
+      ids: [],
-        // 非单个禁用
+      // 非单个禁用
-        single: true,
+      single: true,
-        // 非多个禁用
+      // 非多个禁用
-        multiple: true,
+      multiple: true,
-        // 显示搜索条件
+      // 显示搜索条件
-        showSearch: true,
+      showSearch: true,
-        // 总条数
+      // 总条数
-        total: 0,
+      total: 0,
-        // 收费管理表格数据
+      // 收费管理表格数据
-        prepaymentList: [],
+      prepaymentList: [],
-        // 弹出层标题
+      // 弹出层标题
-        title: "",
+      title: "",
-        // 是否显示弹出层
+      // 是否显示弹出层
-        open: false,
+      open: false,
-        // 查询参数
+      // 查询参数
-        queryParams: {
+      queryParams: {
-          pageNum: 1,
+        pageNum: 1,
-          pageSize: 10,
+        pageSize: 10,
-          collectAt: null,
+        collectAt: null,
-          settlementAt: null,
+        settlementAt: null,
-          settlementFlag: 0,
+        settlementFlag: 0,
-          prepaid: null,
+        prepaid: null,
-          prepaidAt: null,
+        prepaidAt: null,
-          hospitalId: null,
+        hospitalId: null,
-          name: null,
+        name: null,
-        },
+      },
-        // 表单参数
+      // 表单参数
-        formAddPrepayment: {},
+      formAddPrepayment: {},
-        // 表单校验
+      // 表单校验
-        rules: {
+      rules: {
-          prepaid: [
+        prepaid: [
-            {required: true, message: "预付费金额不能为空", trigger: "blur"}
+          {required: true, message: "预付费金额不能为空", trigger: "blur"}
-          ],
+        ],
-          prepaidAt: [
+        prepaidAt: [
-            {required: true, message: "预付费时间不能为空", trigger: "blur"}
+          {required: true, message: "预付费时间不能为空", trigger: "blur"}
-          ]
+        ]
-        }
+      }
+    };
+  },
+
+  created() {
+    this.getList();
+    this.buildSuggestionList();
+    this.myGetUser();
+  },
+  mounted() {
+  },
+
+  methods: {
+    // 获取数据列表，跟进筛选条件不同获取不同类型的数据
+    getList() {
+      if (this.queryParams.settlementFlag === 0) {
+        // 查询已交预付费信息
+        listPrepay(this.queryParams).then(response => {
+          this.prepaymentList = response.data.records.map((item) => {
+            console.log(item);
+            item.noPrepayment = true;
+            return item;
+          });
+          this.total = response.data.total;
+          this.loading = false;
+        })
+      } else {
+        this.getDefaultNoPrepayment();
+      }
+
+    },
+
+    // 生产收据 pdf
+    handleGenerateReceiptPdf(row) {
+      console.log(row);
+      generateReceiptPdf(row).then(response => {
+        // window.open("http://47.106.12.11:8080/prod-api/" + response.msg)
+      })
+      console.log(process.env);
+    },
+    // 获取用户相关信息
+    myGetUser() {
+      getUserProfile().then(response => {
+        this.user = response.data;
+        this.roleGroup = response.roleGroup;
+        this.postGroup = response.postGroup;
+      });
+    },
+    // 处理筛选结算标志
+    selectSettlementFlag(value) {
+      this.getList();
+    },
+
+    // 响应自动查询回显
+    querySearch(queryString, cb) {
+      var restaurants = this.suggestionList;
+      console.log("restaurants-->", restaurants);
+      console.log("queryString", queryString)
+      console.log("cb-->", cb)
+      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
+      // 调用 callback 返回建议列表的数据
+      cb(results);
+    },
+
+    // 处理过滤器
+    createFilter(queryString) {
+      return (restaurant) => {
+        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
       };
     },
 
-    created() {
+    buildSuggestionList() {
-      this.getList();
+      listNoPrepayment().then(response => {
-      this.buildSuggestionList();
+        console.log("aaaaaaaaaaaaa", response);
-      this.myGetUser();
+        let prepaymentList = response.rows;
-    },
+        this.suggestionList = prepaymentList.map(item => {
-    mounted() {
+          return {
-    },
+            "value": item.hospitalId,
-
+            "departName": item.departName,
-    methods: {
+            "name": item.name,
-      // 获取数据列表，跟进筛选条件不同获取不同类型的数据
+            "bedId": item.bedId,
-      getList() {
+            "patientId": item.patientId,
-        if (this.queryParams.settlementFlag === 0) {
-          // 查询已交预付费信息
-          listPrepay(this.queryParams).then(response => {
-            this.prepaymentList = response.data.records;
-            this.total = response.data.total;
-            this.loading = false;
-          })
-        } else {
-          this.getDefaultNoPrepayment();
-        }
-
-      },
-
-      // 获取用户相关信息
-      myGetUser() {
-        getUserProfile().then(response => {
-          this.user = response.data;
-          this.roleGroup = response.roleGroup;
-          this.postGroup = response.postGroup;
-        });
-      },
-      // 处理筛选结算标志
-      selectSettlementFlag(value) {
-        this.getList();
-      },
-
-      // 响应自动查询回显
-      querySearch(queryString, cb) {
-        var restaurants = this.suggestionList;
-        console.log("restaurants-->", restaurants);
-        console.log("queryString", queryString)
-        console.log("cb-->", cb)
-        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
-        // 调用 callback 返回建议列表的数据
-        cb(results);
-      },
-
-      // 处理过滤器
-      createFilter(queryString) {
-        return (restaurant) => {
-          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
-        };
-      },
-
-      buildSuggestionList() {
-        listNoPrepayment().then(response => {
-          console.log("aaaaaaaaaaaaa",response);
-          let prepaymentList = response.rows;
-          this.suggestionList = prepaymentList.map(item => {
-            return {
-              "value": item.hospitalId,
-              "departName": item.departName,
-              "name": item.name,
-              "bedId": item.bedId,
-              "patientId": item.patientId,
-            }
-          });
-        });
-      },
-
-      // 填充所有待缴预付伙食费的病人清单
-      getDefaultNoPrepayment() {
-        this.loading = true;
-        listNoPrepayment(this.queryParams).then(response => {
-          this.prepaymentList = response.rows;
-          this.total = response.total;
-          this.suggestionList = this.prepaymentList.map(item => {
-            return {
-              "value": item.hospitalId,
-              "departName": item.departName,
-              "name": item.name,
-              "bedId": item.bedId,
-              "patientId": item.patientId,
-            }
-          });
-          this.loading = false;
-          return response.rows;
-        });
-      },
-
-      // 处理自动查询列表选择的事件
-      handleSelect(item) {
-        this.formAddPrepayment.name = item.name;
-        this.formAddPrepayment.patientId = item.patientId;
-        this.formAddPrepayment.bedId = item.bedId;
-        this.formAddPrepayment.departName = item.departName;
-        this.formAddPrepayment["hospitalId"] = item.value ;
-      },
-
-      // 处理点击查询图标的事件
-      handleIconClick(ev) {
-        console.log(ev);
-      },
-
-      // 取消按钮
-      cancel() {
-        this.open = false;
-        this.reset();
-      },
-      // 表单重置
-      reset() {
-        this.formAddPrepayment = {
-          prepaymentId: null,
-          patientId: null,
-          collectAt: null,
-          collectBy: null,
-          settlementAt: null,
-          settlementBy: null,
-          settlementId: null,
-          settlementFlag: null,
-          prepaid: 700,
-          prepaidAt: new Date(),
-          hospitalId: null,
-          name: null,
-          userName:null,
-        };
-        this.resetForm("formAddPrepayment");
-      },
-      /** 搜索按钮操作 */
-      handleQuery() {
-        this.queryParams.pageNum = 1;
-        this.getList();
-      },
-      /** 重置按钮操作 */
-      resetQuery() {
-        this.resetForm("queryForm");
-        this.handleQuery();
-      },
-      // 多选框选中数据
-      handleSelectionChange(selection) {
-        this.ids = selection.map(item => item.prepaymentId)
-        this.single = selection.length !== 1
-        this.multiple = !selection.length
-      },
-      /** 新增按钮操作 */
-      handleAdd() {
-        this.reset();
-        this.open = true;
-        this.title = "添加收费管理";
-      },
-      /** 修改按钮操作 */
-      handleUpdate(row) {
-        this.reset();
-        const prepaymentId = row.prepaymentId || this.ids
-        getPrepayment(prepaymentId).then(response => {
-          this.formAddPrepayment = response.data;
-          console.log(response.data)
-          this.open = true;
-          this.title = "出院结清";
-        });
-      },
-      /** 提交按钮 */
-      submitformAddPrepayment() {
-
-        // 1、检查该用户是否找推荐列表中，如果不在，认为该用户是已经缴费的用户
-        let hospitalId = this.formAddPrepayment.hospitalId;
-        this.formAddPrepayment.collectBy = this.user.userName;
-        this.$refs["formAddPrepayment"].validate(valid => {
-          if (valid) {
-            if (!this.suggestionList.find(x=> {
-              return x.value === hospitalId;
-            })) {
-              this.msgError("未找到该住院号记录，请先添加！");
-              return ;
-            }
-
-            this.formAddPrepayment.prepaidAt = null;
-            console.log("form -->", this.formAddPrepayment)
-            addPrepayment(this.formAddPrepayment).then(response => {
-              this.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-              this.buildSuggestionList();
-            });
           }
         });
-      },
+      });
-      /** 删除按钮操作 */
+    },
-      handleDelete(row) {
+
-        const prepaymentIds = row.prepaymentId || this.ids;
+    // 填充所有待缴预付伙食费的病人清单
-        this.$confirm('是否确认删除收费管理编号为"' + prepaymentIds + '"的数据项?', "警告", {
+    getDefaultNoPrepayment() {
-          confirmButtonText: "确定",
+      this.loading = true;
-          cancelButtonText: "取消",
+      listNoPrepayment(this.queryParams).then(response => {
-          type: "warning"
+        this.prepaymentList = response.rows.map(item => {
-        }).then(function () {
+          console.log(item);
-          return delPrepayment(prepaymentIds);
+          item.noPrepayment = false;
-        }).then(() => {
+          return item;
-          this.getList();
+        });
-          this.msgSuccess("删除成功");
+        this.total = response.total;
-        })
+        this.suggestionList = this.prepaymentList.map(item => {
-      },
+          return {
-      /** 导出按钮操作 */
+            "value": item.hospitalId,
-      handleExport() {
+            "departName": item.departName,
-        const queryParams = this.queryParams;
+            "name": item.name,
-        this.$confirm('是否确认导出所有收费管理数据项?', "警告", {
+            "bedId": item.bedId,
-          confirmButtonText: "确定",
+            "patientId": item.patientId,
-          cancelButtonText: "取消",
+          }
-          type: "warning"
+        });
-        }).then(function () {
+        this.loading = false;
-          return exportPrepayment(queryParams);
+        return response.rows;
-        }).then(response => {
+      });
-          this.download(response.msg);
+    },
-        })
+
-      }
+    // 处理自动查询列表选择的事件
+    handleSelect(item) {
+      this.formAddPrepayment.name = item.name;
+      this.formAddPrepayment.patientId = item.patientId;
+      this.formAddPrepayment.bedId = item.bedId;
+      this.formAddPrepayment.departName = item.departName;
+      this.formAddPrepayment["hospitalId"] = item.value;
+    },
+
+    // 处理点击查询图标的事件
+    handleIconClick(ev) {
+      console.log(ev);
+    },
+
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.formAddPrepayment = {
+        prepaymentId: null,
+        patientId: null,
+        collectAt: null,
+        collectBy: null,
+        settlementAt: null,
+        settlementBy: null,
+        settlementId: null,
+        settlementFlag: null,
+        prepaid: 700,
+        prepaidAt: new Date(),
+        hospitalId: null,
+        name: null,
+        userName: null,
+      };
+      this.resetForm("formAddPrepayment");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.prepaymentId)
+      this.single = selection.length !== 1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加收费管理";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const prepaymentId = row.prepaymentId || this.ids
+      getPrepayment(prepaymentId).then(response => {
+        this.formAddPrepayment = response.data;
+        console.log(response.data)
+        this.open = true;
+        this.title = "出院结清";
+      });
+    },
+    /** 提交按钮 */
+    submitformAddPrepayment() {
+
+      // 1、检查该用户是否找推荐列表中，如果不在，认为该用户是已经缴费的用户
+      let hospitalId = this.formAddPrepayment.hospitalId;
+      this.formAddPrepayment.collectBy = this.user.userName;
+      this.$refs["formAddPrepayment"].validate(valid => {
+        if (valid) {
+          if (!this.suggestionList.find(x => {
+            return x.value === hospitalId;
+          })) {
+            this.msgError("未找到该住院号记录，请先添加！");
+            return;
+          }
+
+          this.formAddPrepayment.prepaidAt = null;
+          console.log("form -->", this.formAddPrepayment)
+          addPrepayment(this.formAddPrepayment).then(response => {
+            this.msgSuccess("新增成功");
+            this.open = false;
+            this.getList();
+            this.buildSuggestionList();
+          });
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const prepaymentIds = row.prepaymentId || this.ids;
+      this.$confirm('是否确认删除收费管理编号为"' + prepaymentIds + '"的数据项?', "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(function () {
+        return delPrepayment(prepaymentIds);
+      }).then(() => {
+        this.getList();
+        this.msgSuccess("删除成功");
+      })
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      const queryParams = this.queryParams;
+      this.$confirm('是否确认导出所有收费管理数据项?', "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(function () {
+        return exportPrepayment(queryParams);
+      }).then(response => {
+        this.download(response.msg);
+      })
     }
-  };
+  }
+};
 </script>
 
 <style lang="scss">
-  .my-autocomplete {
+.my-autocomplete {
-    li {
+  li {
-      line-height: normal;
+    line-height: normal;
-      padding: 7px;
+    padding: 7px;
 
-      .name {
+    .name {
-        text-overflow: ellipsis;
+      text-overflow: ellipsis;
-        overflow: hidden;
+      overflow: hidden;
-      }
+    }
 
-      .addr {
+    .addr {
-        font-size: 12px;
+      font-size: 12px;
-        color: #b4b4b4;
+      color: #b4b4b4;
-      }
+    }
 
-      .highlighted .addr {
+    .highlighted .addr {
-        color: #ddd;
+      color: #ddd;
-      }
     }
   }
+}
 </style>