diff --git a/src/views/purchase/purApply/pureApplySearch.vue b/src/views/purchase/purApply/pureApplySearch.vue
index 8b05e5d6..90e418dd 100644
--- a/src/views/purchase/purApply/pureApplySearch.vue
+++ b/src/views/purchase/purApply/pureApplySearch.vue
@@ -1,383 +1,487 @@
 <template>
-    <div>
-        <el-card class="el-card">
-            <el-form  :model="filterQuery" class="query-form" label-width="100px" v-show="showSearch">
-                <el-row>
-                  <el-col :span="6">
-                    <el-form-item label="单据号:" >
-                        <el-input v-model="filterQuery.billNo" style="width: 90%;" placeholder="请输入单据号" clearable></el-input>
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="6">
-                    <el-form-item label="单据日期:" class="query-form-item">
-                        <el-date-picker
-                            style="width: 90%;"
-                            :picker-options="pickerOptions"
-                            v-model="actDateRange"
-                            type="daterange"
-                            format="yyyy 年 MM 月 dd 日"
-                            value-format="yyyy-MM-dd"
-                            range-separator="至"
-                            start-placeholder="开始日期"
-                            end-placeholder="结束日期"
-                        >
-                        </el-date-picker>
-                    </el-form-item>
-                  </el-col>
-                </el-row>
-            </el-form>
+  <div>
+    <el-card class="el-card">
+      <el-form :model="filterQuery" class="query-form" label-width="100px" v-show="showSearch">
+        <el-row>
+          <el-col :span="8">
+            <el-form-item label="申购单号">
+              <el-input v-model="filterQuery.billNo" style="width: 90%" placeholder="请输入单据号" clearable></el-input>
+            </el-form-item>
+          </el-col>
 
-          <div class="top-right-btn">
-            <el-button-group style="display:flex;">
-              <el-button icon="el-icon-view" type="primary" @click="hideSearch">显示/隐藏搜索栏</el-button>
-              <el-button type="primary" icon="el-icon-refresh" @click="onReset">重置</el-button>
-              <el-button type="primary" icon="el-icon-search" @click="onSubmitFind">查询</el-button>
-            </el-button-group>
-          </div>
-          <el-divider style="margin: 15px"></el-divider>
+          <el-col :span="8">
+            <el-form-item label="申购部门">
+              <el-select v-model="filterQuery.targetDeptCode" placeholder="请选择采购仓库" style="width: 90%">
+                <el-option
+                  v-for="item in deptList"
+                  :key="item.code"
+                  :label="item.name"
+                  :value="item.code"
+                >
+                  <span style="float: left">{{ item.name }}</span>
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="申购仓库">
+              <el-select v-model="filterQuery.targetInvCode" style="width: 90%" placeholder="请选择所属仓库">
+                <el-option
+                  v-for="item in invList"
+                  :key="item.name"
+                  :label="item.name"
+                  :value="item.code">
+                  <span style="float: left">{{ item.name }}</span>
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
 
-            <el-table v-loading="loading" :data="list" style="width: 100%" border highlight-current-row @current-change="handleDetail">
-                <el-table-column label="序号" type="index" width="60"></el-table-column>
-                <el-table-column label="单据号" prop="billNo"></el-table-column>
-                <el-table-column label="申购日期" prop="billDate">
-                    <template slot-scope="scope">
-                        <span>{{ parseTime(scope.row.billDate, '{y}-{m}-{d}') }}</span>
-                    </template>
-                </el-table-column>
-                <el-table-column label="创建人" prop="createByName"></el-table-column>
-                <el-table-column label="审核人" prop="auditByName"></el-table-column>
-                <el-table-column label="申购仓库" prop="invName"></el-table-column>
-                <el-table-column label="申购分库" prop="subInvName"></el-table-column>
-                <el-table-column label="申购说明" prop="remark"></el-table-column>
-                <el-table-column label="状态" prop="status">
-                    <template slot-scope="scope">
-                        <el-tag :type="(scope.row.status) | statusFilterType">
-                            {{ statusMap[scope.row.status] }}
-                        </el-tag>
-                    </template>
-                </el-table-column>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item label="创建时间:">
+              <el-date-picker
+                :picker-options="pickerOptions"
+                v-model="actDateRange"
+                type="daterange"
+                format="yyyy 年 MM 月 dd 日"
+                style="width: 90%"
+                value-format="yyyy-MM-dd"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+              >
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="审核时间:">
+              <el-date-picker
+                :picker-options="pickerAuditOptions"
+                v-model="actAuditDateRange"
+                type="daterange"
+                format="yyyy 年 MM 月 dd 日"
+                style="width: 90%"
+                value-format="yyyy-MM-dd"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+              >
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
 
+      <div class="top-right-btn">
+        <el-button-group style="display:flex;">
+          <el-button icon="el-icon-view" type="primary" @click="hideSearch">显示/隐藏搜索栏</el-button>
+          <el-button type="primary" icon="el-icon-refresh" @click="onReset">重置</el-button>
+          <el-button type="primary" icon="el-icon-search" @click="onSubmitFind">查询</el-button>
+        </el-button-group>
+      </div>
+      <el-divider style="margin: 15px"></el-divider>
 
-                <el-table-column label="操作" width="60">
-                    <template slot-scope="scope">
-                        <el-button type="text"  @click.native.stop="deleteDialog(scope.row)">删除</el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
+      <el-table v-loading="loading" :data="list" style="width: 100%" border highlight-current-row @current-change="handleDetail">
+        <el-table-column label="序号" type="index" width="60"></el-table-column>
+        <el-table-column label="申购单号" prop="billNo"></el-table-column>
+        <el-table-column label="创建时间" prop="createTime"></el-table-column>
+        <el-table-column label="申购部门" prop="targetDeptName"></el-table-column>
+        <el-table-column label="申购仓库" prop="targetInvName"></el-table-column>
+        <el-table-column label="紧急程度" prop="emergency">
+          <template slot-scope="scope">
+            {{ emergencyMap[scope.row.emergency] }}
+          </template>
+        </el-table-column>
+        <el-table-column label="到货时间" prop="arrivalTime"></el-table-column>
+        <el-table-column label="申购说明" prop="remark"></el-table-column>
+        <el-table-column label="状态" prop="status">
+          <template slot-scope="scope">
+            <el-tag :type="(scope.row.status) | statusFilterType">
+              {{ statusMap[scope.row.status] }}
+            </el-tag>
+          </template>
+        </el-table-column>
 
-          <pagination
-            v-show="total>0"
-            :total="total"
-            :page.sync="filterQuery.page"
-            :limit.sync="filterQuery.limit"
-            @pagination="handleCurrentChange"
-          ></pagination>
+        <el-table-column label="操作" width="60">
+          <template slot-scope="scope">
+            <el-button type="text" @click.native.stop="deleteDialog(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
 
-        </el-card>
-        <el-card class="el-card">
-            <el-table v-loading="loading" :data="detailList" style="width: 100%">
-                <el-table-column label="序号" type="index" width="120"></el-table-column>
-                <!-- <el-table-column label="产品编码" prop="productId"></el-table-column> -->
-                <el-table-column label="产品通用名" prop="productName" show-overflow-tooltip="true"></el-table-column>
-                <el-table-column label="规格型号" prop="spec" show-overflow-tooltip="true"></el-table-column>
-                <el-table-column label="申购数量" prop="count"></el-table-column>
-                <el-table-column label="注册/备案凭证号" prop="zczbhhzbapzbh" show-overflow-tooltip="true"></el-table-column>
-                <el-table-column label="生产企业" prop="manufactory" show-overflow-tooltip="true"></el-table-column>
-                <el-table-column label="医疗器械注册人" prop="ylqxzcrbarmc" show-overflow-tooltip="true"></el-table-column>
-                <el-table-column label="供应商" prop="supName" show-overflow-tooltip="true"></el-table-column>
-            </el-table>
-        </el-card>
+      <pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="filterQuery.page"
+        :limit.sync="filterQuery.limit"
+        @pagination="handleCurrentChange"
+      ></pagination>
 
+    </el-card>
+    <el-card class="el-card">
+      <el-table v-loading="loading" :data="detailList" style="width: 100%" border>
+        <el-table-column label="序号" type="index" width="120"></el-table-column>
+        <el-table-column label="物资名称" prop="productName" show-overflow-tooltip="true"></el-table-column>
+        <el-table-column label="规格型号" prop="spec" show-overflow-tooltip="true"></el-table-column>
+        <el-table-column label="申购数量" prop="count"></el-table-column>
+        <el-table-column label="计量单位" prop="measname"></el-table-column>
+        <el-table-column label="供应商" prop="supName" show-overflow-tooltip="true"></el-table-column>
+        <el-table-column label="生产企业" prop="manufactory" show-overflow-tooltip="true"></el-table-column>
+        <el-table-column label="注册/备案号" prop="zczbhhzbapzbh" show-overflow-tooltip="true"></el-table-column>
+        <el-table-column label="注册/备案人" prop="ylqxzcrbarmc" show-overflow-tooltip="true"></el-table-column>
+      </el-table>
+    </el-card>
 
-        <el-dialog
-            :title="formMap[formName]"
-            :visible.sync="newSpDistributionVisible"
-            width="80%"
-            v-if="newSpDistributionVisible"
-            @close='closeDialog'
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-        >
-            <pureApplyDetail
-                :closeDialog="closeDialog"
-                :idQuery="idQuery"
-                :editType="editType"
-            ></pureApplyDetail>
-        </el-dialog>
-    </div>
+
+    <el-dialog
+      :title="formMap[formName]"
+      :visible.sync="newSpDistributionVisible"
+      width="80%"
+      v-if="newSpDistributionVisible"
+      @close='closeDialog'
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+    >
+      <pureApplyDetail
+        :closeDialog="closeDialog"
+        :idQuery="idQuery"
+        :editType="editType"
+      ></pureApplyDetail>
+    </el-dialog>
+  </div>
 </template>
 <script>
 import pureApplyDetail from "./pureApplyDetailDialog";
 import {delApply, auditOrder, listApplyDetail, auditListApply} from "@/api/purchase/purApply";
+import {getInvListByUser} from "@/api/system/invWarehouse";
+import {getDeptListByUser} from "@/api/auth/authDept";
 
 export default {
-    data() {
-        return {
-            showSearch: true,
-            filterQuery: {
-                billAction: null,
-                billNo: "",
-                originType: null,
-                thirdSysFk: "",
-                page: 1,
-                limit: 10,
-                corpName: null,
-                type: 1,
-                editStatus: 1,
+  data() {
+    return {
+      showSearch: true,
+      filterQuery: {
+        billAction: null,
+        billNo: "",
+        originType: null,
+        thirdSysFk: "",
+        page: 1,
+        limit: 10,
+        invList:{},
+        deptList:{},
+        corpName: null,
+        type: 1,
+        editStatus: 1,
+      },
+      formName: null,
+      formMap: {
+        add: "新增申购单据",
+        update: "申购单据详情",
+      },
+      statusMap: {
+        1: "草稿",
+        2: "未审核",
+        3: "已审核",
+        4: "已拒绝"
+      },
+      emergencyMap:{
+        1: "普通",
+        2: "紧急",
+        3: "不紧急",
+      },
+      idQuery: {},
+      editType: 2,
+      total: 0,
+      thirdSys: [],
+      thirdSysDetail: null,
+      busTypes: [],
+      originTypes: [],
+      list: [],
+      detailList: [],
+      loading: false,
+      actDateRange: [],
+      actAuditDateRange: [],
+      newSpDistributionVisible: false,
+      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]);
             },
-            formName: null,
-            formMap: {
-                add: "新增申购单据",
-                update: "申购单据详情",
+          },
+          {
+            text: "最近三个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit("pick", [start, end]);
             },
-            statusMap: {
-                1: "草稿",
-                2: "未审核",
-                3: "已审核",
-                4: "已拒绝"
+          },
+        ],
+      },
+
+      pickerAuditOptions: {
+        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]);
             },
-            idQuery: {},
-            editType: 2,
-            total: 0,
-            thirdSys: [],
-            thirdSysDetail: null,
-            busTypes: [],
-            originTypes: [],
-            list: [],
-            detailList: [],
-            loading: false,
-            actDateRange: [],
-            newSpDistributionVisible: false,
-            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]);
-                        },
-                    },
-                ],
+          },
+          {
+            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]);
+            },
+          },
+        ],
+      },
+    };
 
-    methods: {
-        onReset() {
-            this.$router.push({
-                path: "",
-            });
-            this.filterQuery = {
-                billNo: "",
-                thirdSysFk: "",
-                billFlag: null,
-                billAction: null,
-                startDate: null,
-                endDate: null,
-                page: 1,
-                limit: 10,
-                corpName: null,
-                type: 1,
-                editStatus: 1,
-            };
-            this.actDateRange = [];
-            this.getList();
-        },
+  },
 
-        onSubmitFind() {
-            this.filterQuery.page = 1;
-            this.getList();
-        },
-        hideSearch() {
-          this.showSearch = !this.showSearch;
-        },
-        getList() {
-            if (this.actDateRange != null) {
-                this.filterQuery.startDate = this.actDateRange[0];
-                this.filterQuery.endDate = this.actDateRange[1];
-            } else {
-                this.filterQuery.startDate = null;
-                this.filterQuery.endDate = null;
-            }
-            this.loading = true;
-            this.filterQuery.status = 3;
-            auditListApply(this.filterQuery)
-                .then((response) => {
-                    if (response.code == 20000) {
-                        this.list = response.data.list || [];
-                        this.total = response.data.total || 0;
-                    } else {
-                        this.$message.error(response.message);
-                    }
-                    this.loading = false;
-                })
-                .catch(() => {
-                    this.loading = false;
-                    this.list = [];
-                    this.total = 0;
-                });
-        },
-        handleDetail(row) {
-            let query = {orderIdFk: row.id};
-            this.loading = true;
-            listApplyDetail(query) //查找该单号下的所有条码
-                .then((response) => {
-                    this.detailList = response.data.list || [];
-                    this.loading = false;
-                })
-                .catch(() => {
-                    this.loading = false;
-                    this.detailList = [];
-                    this.total = 0;
-                });
-        },
-        submitOrder(row) {
-            this.loading = true;
-            let tQuery = {
-                editStatus: 2,
-                purApplyEntity: row,
-            }
-            auditOrder(tQuery)
-                .then(response => {
-                    this.loading = false;
-                    if (response.code === 20000) {
-                        this.$message.success("提交成功！");
-                        this.getList();
-                    } else {
-                        this.$message.error(response.message);
-                    }
-                })
-                .catch(() => {
-                    this.loading = false;
-                })
-        },
-        deleteDialog(row) {
-            this.$confirm("此操作将永久删除该单据, 是否继续?", "提示", {
-                confirmButtonText: "确定",
-                cancelButtonText: "取消",
-                type: "warning",
-            })
-                .then(() => {
-                    delApply(row.id)
-                        .then((response) => {
-                            this.loading = false;
-                            if (response.code == 20000) {
-                                this.$message.success("删除成功");
-                                this.getList();
-                            } else {
-                                this.$message.error(response.message);
-                            }
-                        })
-                        .catch(() => {
-                            this.loading = false;
-                        });
+  methods: {
+    onReset() {
+      this.$router.push({
+        path: "",
+      });
+      this.filterQuery = {
+        billNo: "",
+        thirdSysFk: "",
+        billFlag: null,
+        billAction: null,
+        startDate: null,
+        endDate: null,
+        page: 1,
+        limit: 10,
+        corpName: null,
+        type: 1,
+        editStatus: 1,
+      };
+      this.actDateRange = [];
+      this.getList();
+    },
 
-                })
-                .catch(() => {
-                });
-        },
-        handleCurrentChange(val) {
-            this.filterQuery.page = val.page;
+    onSubmitFind() {
+      this.filterQuery.page = 1;
+      this.getList();
+    },
+    hideSearch() {
+      this.showSearch = !this.showSearch;
+    },
+    getList() {
+      if (this.actDateRange != null) {
+        this.filterQuery.startDate = this.actDateRange[0];
+        this.filterQuery.endDate = this.actDateRange[1];
+      } else {
+        this.filterQuery.startDate = null;
+        this.filterQuery.endDate = null;
+      }
+      if (this.actAuditDateRange != null) {
+        this.filterQuery.starAuditDate = this.actAuditDateRange[0];
+        this.filterQuery.endAuditDate = this.actAuditDateRange[1];
+      } else {
+        this.filterQuery.starAuditDate = null;
+        this.filterQuery.endAuditDate = null;
+      }
+      this.loading = true;
+      this.filterQuery.status = 3;
+      auditListApply(this.filterQuery)
+        .then((response) => {
+          if (response.code == 20000) {
+            this.list = response.data.list || [];
+            this.total = response.data.total || 0;
+          } else {
+            this.$message.error(response.message);
+          }
+          this.loading = false;
+        })
+        .catch(() => {
+          this.loading = false;
+          this.list = [];
+          this.total = 0;
+        });
+    },
+    handleDetail(row) {
+      let query = {orderIdFk: row.id};
+      this.loading = true;
+      listApplyDetail(query) //查找该单号下的所有条码
+        .then((response) => {
+          this.detailList = response.data.list || [];
+          this.loading = false;
+        })
+        .catch(() => {
+          this.loading = false;
+          this.detailList = [];
+          this.total = 0;
+        });
+    },
+    submitOrder(row) {
+      this.loading = true;
+      let tQuery = {
+        editStatus: 2,
+        purApplyEntity: row,
+      }
+      auditOrder(tQuery)
+        .then(response => {
+          this.loading = false;
+          if (response.code === 20000) {
+            this.$message.success("提交成功！");
             this.getList();
-        },
+          } else {
+            this.$message.error(response.message);
+          }
+        })
+        .catch(() => {
+          this.loading = false;
+        })
+    },
+    deleteDialog(row) {
+      this.$confirm("此操作将永久删除该单据, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          delApply(row.id)
+            .then((response) => {
+              this.loading = false;
+              if (response.code == 20000) {
+                this.$message.success("删除成功");
+                this.getList();
+              } else {
+                this.$message.error(response.message);
+              }
+            })
+            .catch(() => {
+              this.loading = false;
+            });
 
-        closeDialog() {
-            this.newSpDistributionVisible = false;
-            this.getList();
-            this.detailList = [];
-        },
+        })
+        .catch(() => {
+        });
+    },
+    handleCurrentChange(val) {
+      this.filterQuery.page = val.page;
+      this.getList();
+    },
 
+    closeDialog() {
+      this.newSpDistributionVisible = false;
+      this.getList();
+      this.detailList = [];
+    },
 
-        newDistributionForm(index, row) {
-            this.idQuery.id = '';
-            if (this.$isNotBlank(row) && this.$isNotBlank(row.id)) {
-                this.idQuery.id = row.id;
-                this.idQuery.formData = row;
-                this.formName = "update";
-            } else
-                this.formName = "add";
-            this.newSpDistributionVisible = true;
-        },
 
+    newDistributionForm(index, row) {
+      this.idQuery.id = '';
+      if (this.$isNotBlank(row) && this.$isNotBlank(row.id)) {
+        this.idQuery.id = row.id;
+        this.idQuery.formData = row;
+        this.formName = "update";
+      } else
+        this.formName = "add";
+      this.newSpDistributionVisible = true;
+    },
+    getInvList() {
+      getInvListByUser().then((res) => {
+        this.invList = res.data || [];
+        this.getBusType();
+      })
+    },
+    getDeptList() {
+      getDeptListByUser().then((res) => {
+        this.deptList = res.data || [];
+      });
+    },
+  }
+  ,
+  components: {
+    pureApplyDetail,
+  }
+  ,
+  filters: {
+    statusFilterType(status) {
+      const statusMap = {
+        2: "warning",
+        3: "success",
+        4: "danger",
+      };
+      return statusMap[status];
     }
     ,
-    components: {
-        pureApplyDetail,
-    }
-    ,
-    filters: {
-        statusFilterType(status) {
-            const statusMap = {
-                2: "warning",
-                3: "success",
-                4: "danger",
-            };
-            return statusMap[status];
-        }
-        ,
-    }
-    ,
-    mounted() {
-    }
-    ,
-    created() {
-        let end = new Date();
-        let start = new Date();
-        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-        this.actDateRange = [start, end];
-        this.getList();
-    }
-    ,
+  }
+  ,
+  mounted() {
+  }
+  ,
+  created() {
+    this.getList();
+    this.getInvList();
+    this.getDeptList();
+  }
+  ,
 }
 ;
 </script>
 <style scoped>
 .itemTag {
-    float: left;
-    text-align: left;
-    margin-top: 10px;
-    width: 25%;
+  float: left;
+  text-align: left;
+  margin-top: 10px;
+  width: 25%;
 }
 
 .text {
-    font-size: 13px;
-    font-family: "Microsoft YaHei";
+  font-size: 13px;
+  font-family: "Microsoft YaHei";
 }
 
 .query-form-item {
-    display: block !important;
-    margin-right: 10px;
-    margin-bottom: 5px;
+  display: block !important;
+  margin-right: 10px;
+  margin-bottom: 5px;
 }
 
 .el-row {
-    display: flex;
-    flex-wrap: wrap;
+  display: flex;
+  flex-wrap: wrap;
 }
 
 .el-col {
-    border-radius: 4px;
-    flex-wrap: wrap;
+  border-radius: 4px;
+  flex-wrap: wrap;
 }
 </style>