diff --git a/src/page/main/qa-manage/answer-list/index.vue b/src/page/main/qa-manage/answer-list/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..32b57decea6c42c5aaf5a9f50024c37e31e72a63
--- /dev/null
+++ b/src/page/main/qa-manage/answer-list/index.vue
@@ -0,0 +1,466 @@
+<template>
+  <div class="page_container">
+    <bg-breadcrumb></bg-breadcrumb>
+    <div class="main_container">
+      <bg-filter-group
+        @search="changeSearch"
+        v-model="filter.search"
+        placeholder="请输入问题标题、问题内容、回答内容、回复人">
+        <template v-slot:left_action>
+          <div class="apaas_button">
+            <el-button type="primary" @click="openDeleteTipDialog(2)"> 批量删除 </el-button>
+            <span class="sleceted_tip"
+              >已选<span class="num">{{ selectedNum }}</span
+              >项</span
+            >
+            <span class="clean" @click="cleanSelected">清空</span>
+          </div>
+        </template>
+        <template v-slot:filter_group>
+          <div class="left-filter filter_list">
+            <div class="filter_item">
+              <span class="filter_title">问题对象</span>
+              <el-select v-model="filter.question_obj" placeholder="请选择" style="width: 300px">
+                <el-option
+                  v-for="(item, index) in questionObjOption"
+                  :key="'questionObj' + index"
+                  :label="item.name"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </div>
+            <div class="filter_item">
+              <span class="filter_title">回复时间</span>
+              <el-date-picker
+                v-model="filter.time"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                value-format="YYYY-MM-DD"
+                style="width: 300px" />
+            </div>
+          </div>
+          <div class="right-action apaas_button">
+            <el-button type="primary" @click="filterAction"> 查询 </el-button>
+            <el-button type="default" @click="filterClear"> 重置 </el-button>
+          </div>
+        </template>
+      </bg-filter-group>
+      <div class="table_container">
+        <bg-table
+          ref="rulesTable"
+          :headers="headers"
+          :rows="tableRows"
+          :stripe="true"
+          select
+          @selectAc="selectRows">
+          <template v-slot:title="{ row }">
+            <a
+              class="can_click_text"
+              :href="`/apaas/knowledge/ui/#/qa-center/detail?id=${row.id}`"
+              target="_blank"
+              >{{ row.title }}</a
+            >
+          </template>
+          <template v-slot:question_obj="{ row }">
+            <span>{{ questionObjArr[row.question_obj] }}</span>
+          </template>
+
+          <template v-slot:action="{ row }">
+            <bg-table-btn @click="openDeleteTipDialog(1, row)">删除</bg-table-btn>
+          </template>
+        </bg-table>
+        <bg-pagination
+          :page="filter.page"
+          :size="filter.limit"
+          :total="tableTotal"
+          @change-page="changePage"
+          @change-size="changeSize">
+        </bg-pagination>
+      </div>
+    </div>
+
+    <el-dialog class="dialog_box" title="提示" v-model="dialogDeleteTips" width="400px">
+      <div class="dialog-alert">
+        <bg-icon
+          class=""
+          icon="#bg-ic-s-circle-warning" />删除后，提问及答复内容均被删除且不可恢复， 确定删除吗？
+      </div>
+      <template v-slot:footer>
+        <div class="apaas_button">
+          <el-button type="default" @click="dialogDeleteTips = false">取 消</el-button>
+          <el-button type="primary" @click="openDeleteDialog">确 定</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <el-dialog
+      class="dialog_box"
+      :title="deleteDialogConfig.title"
+      v-model="dialogDelete"
+      width="400px">
+      <!-- <div style="text-align: center">
+        {{ deleteDialogConfig.tips }}
+      </div> -->
+      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="80px">
+        <el-form-item label="申请理由" prop="delete_reason">
+          <el-input
+            v-model.trim="ruleForm.delete_reason"
+            type="textarea"
+            placeholder="请输入申请理由" />
+        </el-form-item>
+      </el-form>
+      <template v-slot:footer>
+        <div class="apaas_button">
+          <el-button type="default" @click="dialogDelete = false">取 消</el-button>
+          <el-button type="primary" @click="confimDelete">确 定</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { reactive, toRefs, onBeforeMount, ref } from "vue";
+import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
+import axios from "@/request/http.js";
+import { ElMessage } from "element-plus";
+
+const ruleFormRef = ref();
+const rulesTable = ref();
+const state = reactive({
+  filter: {
+    search: "",
+    question_obj: "0",
+    time: [],
+    page: 1,
+    limit: 10,
+  },
+  headers: [
+    {
+      label: "回答内容",
+      prop: "answer_content",
+    },
+    {
+      label: "问题标题",
+      prop: "title",
+    },
+    {
+      label: "问题内容",
+      prop: "content",
+    },
+    {
+      label: "问题对象",
+      prop: "question_obj",
+      width: 100,
+    },
+    {
+      label: "答复数",
+      prop: "comments",
+      width: 70,
+    },
+    {
+      label: "回复人",
+      prop: "answer_user",
+    },
+    {
+      label: "回复时间",
+      prop: "created_time",
+      width: 200,
+    },
+    {
+      label: "操作",
+      prop: "action",
+      width: 80,
+      fixed: "right",
+    },
+  ],
+  tableRows: [],
+  tableTotal: 0,
+  selectedNum: 0,
+  actionRow: {},
+  selection: [],
+  dialogDeleteTips: false,
+  dialogDelete: false,
+  deleteDialogConfig: {
+    title: "删除",
+    idList: [],
+    tips: "确定要删除当前行数据吗？",
+  },
+  questionObjOption: [
+    {
+      name: "全部",
+      value: "0",
+    },
+    {
+      name: "能力",
+      value: "1",
+    },
+    {
+      name: "应用",
+      value: "2",
+    },
+    {
+      name: "平台",
+      value: "3",
+    },
+  ],
+  ruleForm: {
+    delete_reason: "",
+  },
+  rules: {
+    delete_reason: [
+      {
+        required: true,
+        message: "请输入删除理由",
+        trigger: "blur",
+      },
+      {
+        max: 50,
+        message: "最多50个字符",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const questionObjArr = state.questionObjOption.map((item) => item.name);
+
+const changeSearch = (val) => {
+  state.filter.search = val;
+  changePage(1);
+}; // 关键字
+const changePage = (page) => {
+  state.filter.page = page;
+  getTableRows();
+}; // 改变页码
+const changeSize = (size) => {
+  state.filter.limit = size;
+  changePage(1);
+}; // 改变每页条数
+const filterAction = () => {
+  changePage(1);
+}; // 高级搜索中查询
+const filterClear = () => {
+  state.filter = {
+    search: "",
+    page: 1,
+    limit: 10,
+    time: [],
+  };
+  changePage(1);
+}; // 高级搜索中重置
+const getTableRows = () => {
+  let params = { ...state.filter };
+  params.start_at = params.time ? params.time[0] || "" : "";
+  params.end_at = params.time ? params.time[1] || "" : "";
+  delete params.time;
+  axios
+    .get(`/apaas/knowledge/v5/question/manage/answers/list`, {
+      params,
+    })
+    .then((res) => {
+      if (res.data.code == 200) {
+        state.tableRows = res.data.data || [];
+        state.tableTotal = res.data.total;
+      } else {
+        ElMessage.error(res.data.data);
+      }
+    });
+}; // 获取表格数据
+
+const selectRows = (data) => {
+  state.selectedNum = data.allLength;
+  state.selection = data.selection;
+};
+const cleanSelected = () => {
+  rulesTable.value.clearTable();
+}; //清空
+
+const openDeleteTipDialog = (type, row) => {
+  state.dialogDeleteTips = true;
+  state.actionRow = row;
+  state.deleteType = type;
+};
+
+//打开删除弹窗
+const openDeleteDialog = () => {
+  if (state.deleteType === 2) {
+    const res = rulesTable.value.dealSelectData();
+    const list = Object.values(res);
+    if (list.length === 0) return ElMessage.warning("请选择要删除的数据");
+    state.dialogDelete = true;
+    const idList = list.map((item) => item.id);
+    state.deleteDialogConfig = { title: "批量删除", idList, tips: "确定要删除所选数据吗？" };
+    return;
+  }
+  const idList = [state.actionRow.id];
+  state.dialogDelete = true;
+  state.deleteDialogConfig = {
+    title: "删除",
+    idList: idList,
+    tips: "确定要删除当前行数据吗？",
+  };
+};
+
+//确定删除
+const confimDelete = () => {
+  ruleFormRef.value.validate((valid) => {
+    if (valid) {
+      const data = {
+        ids: state.deleteDialogConfig.idList.join(","),
+        delete_reason: state.ruleForm.delete_reason,
+      };
+
+      axios
+        .delete("/apaas/knowledge/v5/question/manage/answer", {
+          data,
+        })
+        .then((res) => {
+          if (res.data.code == 200) {
+            ElMessage.success("删除成功");
+            changePage(1);
+          } else {
+            ElMessage.error(res.data.data);
+          }
+        })
+        .finally(() => {
+          ruleFormRef.value.resetFields();
+          state.dialogDeleteTips = false;
+          state.dialogDelete = false;
+        });
+    }
+  });
+  return;
+};
+
+const {
+  filter,
+  headers,
+  tableRows,
+  tableTotal,
+  selectedNum,
+  questionObjOption,
+  dialogDeleteTips,
+  dialogDelete,
+  deleteDialogConfig,
+  ruleForm,
+  rules,
+} = toRefs(state);
+
+onBeforeMount(() => {
+  getTableRows();
+});
+</script>
+
+<style lang="scss" scoped>
+.page_container {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: stretch;
+  width: 100%;
+  padding: 0 24px;
+  min-height: 100%;
+  .main_container {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    flex-grow: 1;
+    width: 100%;
+    background-color: #fff;
+    box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
+    border-radius: 6px;
+    padding: 0 0 16px 0;
+    margin-bottom: 16px;
+    position: relative;
+    .sleceted_tip {
+      margin: 0 24px 0 40px;
+      vertical-align: middle;
+      font-size: 14px;
+      color: #404a62;
+      .num {
+        margin: 0 3px 0 3px;
+        font-weight: 600;
+        color: #202531;
+      }
+    }
+    .clean {
+      vertical-align: middle;
+      font-size: 14px;
+      color: #3759be;
+      cursor: pointer;
+    }
+    .filter-group {
+      .left-filter {
+        flex: 1;
+        display: flex;
+        justify-content: start;
+        flex-wrap: wrap;
+        .filter_item {
+          display: flex;
+          align-items: center;
+          .filter_title {
+            width: 84px;
+            white-space: pre-wrap;
+            font-weight: normal;
+          }
+        }
+      }
+      .right-action {
+        width: 144px;
+        padding-bottom: 16px;
+        .el-button {
+          width: 64px;
+        }
+      }
+    }
+    .table_container {
+      padding: 0 16px;
+      .el-table {
+        flex: 1;
+        .under_line {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+
+  :deep() .dialog_box_detail {
+    .el-dialog__body {
+      padding: 0 0 18px 0;
+      height: 580px;
+    }
+
+    .form_filter {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: 69px;
+      border-bottom: 1px solid #e6e9ef;
+      .right {
+        margin-right: 16px;
+        .el-button {
+          width: 64px;
+          &:last-child {
+            margin-left: 16px;
+          }
+        }
+      }
+    }
+    .table_content {
+      padding: 0 16px;
+    }
+  }
+}
+
+.dialog-alert {
+  text-align: left;
+  line-height: 24px;
+  .bg-icon {
+    margin-right: 8px;
+  }
+}
+</style>
diff --git a/src/page/main/qa-manage/question-list/index.vue b/src/page/main/qa-manage/question-list/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9850ae2b3e435f6af7951b14d040ab841541e8aa
--- /dev/null
+++ b/src/page/main/qa-manage/question-list/index.vue
@@ -0,0 +1,462 @@
+<template>
+  <div class="page_container">
+    <bg-breadcrumb></bg-breadcrumb>
+    <div class="main_container">
+      <bg-filter-group
+        @search="changeSearch"
+        v-model="filter.search"
+        placeholder="请输入问题标题、问题内容、发布人">
+        <template v-slot:left_action>
+          <div class="apaas_button">
+            <el-button type="primary" @click="openDeleteTipDialog(2)"> 批量删除 </el-button>
+            <span class="sleceted_tip"
+              >已选<span class="num">{{ selectedNum }}</span
+              >项</span
+            >
+            <span class="clean" @click="cleanSelected">清空</span>
+          </div>
+        </template>
+        <template v-slot:filter_group>
+          <div class="left-filter filter_list">
+            <div class="filter_item">
+              <span class="filter_title">问题对象</span>
+              <el-select v-model="filter.question_obj" placeholder="请选择" style="width: 300px">
+                <el-option
+                  v-for="(item, index) in questionObjOption"
+                  :key="'questionObj' + index"
+                  :label="item.name"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </div>
+            <div class="filter_item">
+              <span class="filter_title">发布时间</span>
+              <el-date-picker
+                v-model="filter.time"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                value-format="YYYY-MM-DD"
+                style="width: 300px" />
+            </div>
+          </div>
+          <div class="right-action apaas_button">
+            <el-button type="primary" @click="filterAction"> 查询 </el-button>
+            <el-button type="default" @click="filterClear"> 重置 </el-button>
+          </div>
+        </template>
+      </bg-filter-group>
+      <div class="table_container">
+        <bg-table
+          ref="rulesTable"
+          :headers="headers"
+          :rows="tableRows"
+          :stripe="true"
+          select
+          @selectAc="selectRows">
+          <template v-slot:title="{ row }">
+            <a
+              class="can_click_text"
+              :href="`/apaas/knowledge/ui/#/qa-center/detail?id=${row.id}`"
+              target="_blank"
+              >{{ row.title }}</a
+            >
+          </template>
+          <template v-slot:question_obj="{ row }">
+            <span>{{ questionObjArr[row.question_obj] }}</span>
+          </template>
+
+          <template v-slot:action="{ row }">
+            <bg-table-btn @click="openDeleteTipDialog(1, row)">删除</bg-table-btn>
+          </template>
+        </bg-table>
+        <bg-pagination
+          :page="filter.page"
+          :size="filter.limit"
+          :total="tableTotal"
+          @change-page="changePage"
+          @change-size="changeSize">
+        </bg-pagination>
+      </div>
+    </div>
+
+    <el-dialog class="dialog_box" title="提示" v-model="dialogDeleteTips" width="400px">
+      <div class="dialog-alert">
+        <bg-icon
+          class=""
+          icon="#bg-ic-s-circle-warning" />删除后，提问及答复内容均被删除且不可恢复， 确定删除吗？
+      </div>
+      <template v-slot:footer>
+        <div class="apaas_button">
+          <el-button type="default" @click="dialogDeleteTips = false">取 消</el-button>
+          <el-button type="primary" @click="openDeleteDialog">确 定</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <el-dialog
+      class="dialog_box"
+      :title="deleteDialogConfig.title"
+      v-model="dialogDelete"
+      width="400px">
+      <!-- <div style="text-align: center">
+        {{ deleteDialogConfig.tips }}
+      </div> -->
+      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="80px">
+        <el-form-item label="申请理由" prop="delete_reason">
+          <el-input
+            v-model.trim="ruleForm.delete_reason"
+            type="textarea"
+            placeholder="请输入申请理由" />
+        </el-form-item>
+      </el-form>
+      <template v-slot:footer>
+        <div class="apaas_button">
+          <el-button type="default" @click="dialogDelete = false">取 消</el-button>
+          <el-button type="primary" @click="confimDelete">确 定</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { reactive, toRefs, onBeforeMount, ref } from "vue";
+import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
+import axios from "@/request/http.js";
+import { ElMessage } from "element-plus";
+
+const ruleFormRef = ref();
+const rulesTable = ref();
+const state = reactive({
+  filter: {
+    search: "",
+    question_obj: "0",
+    time: [],
+    page: 1,
+    limit: 10,
+  },
+  headers: [
+    {
+      label: "问题标题",
+      prop: "title",
+    },
+    {
+      label: "问题内容",
+      prop: "content",
+    },
+    {
+      label: "问题对象",
+      prop: "question_obj",
+      width: 100,
+    },
+    {
+      label: "答复数",
+      prop: "comments",
+      width: 70,
+    },
+    {
+      label: "发布人",
+      prop: "created_by",
+    },
+    {
+      label: "发布时间",
+      prop: "created_time",
+      width: 200,
+    },
+    {
+      label: "操作",
+      prop: "action",
+      width: 80,
+      fixed: "right",
+    },
+  ],
+  tableRows: [],
+  tableTotal: 0,
+  selectedNum: 0,
+  actionRow: {},
+  selection: [],
+  dialogDeleteTips: false,
+  dialogDelete: false,
+  deleteDialogConfig: {
+    title: "删除",
+    idList: [],
+    tips: "确定要删除当前行数据吗？",
+  },
+  questionObjOption: [
+    {
+      name: "全部",
+      value: "0",
+    },
+    {
+      name: "能力",
+      value: "1",
+    },
+    {
+      name: "应用",
+      value: "2",
+    },
+    {
+      name: "平台",
+      value: "3",
+    },
+  ],
+  ruleForm: {
+    delete_reason: "",
+  },
+  rules: {
+    delete_reason: [
+      {
+        required: true,
+        message: "请输入删除理由",
+        trigger: "blur",
+      },
+      {
+        max: 50,
+        message: "最多50个字符",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const questionObjArr = state.questionObjOption.map((item) => item.name);
+
+const changeSearch = (val) => {
+  state.filter.search = val;
+  changePage(1);
+}; // 关键字
+const changePage = (page) => {
+  state.filter.page = page;
+  getTableRows();
+}; // 改变页码
+const changeSize = (size) => {
+  state.filter.limit = size;
+  changePage(1);
+}; // 改变每页条数
+const filterAction = () => {
+  changePage(1);
+}; // 高级搜索中查询
+const filterClear = () => {
+  state.filter = {
+    search: "",
+    page: 1,
+    limit: 10,
+    time: [],
+  };
+  changePage(1);
+}; // 高级搜索中重置
+const getTableRows = () => {
+  let params = { ...state.filter };
+  params.start_at = params.time ? params.time[0] || "" : "";
+  params.end_at = params.time ? params.time[1] || "" : "";
+  delete params.time;
+  axios
+    .get(`/apaas/knowledge/v5/question/manage/ask/list`, {
+      params,
+    })
+    .then((res) => {
+      if (res.data.code == 200) {
+        state.tableRows = res.data.data || [];
+        state.tableTotal = res.data.total;
+      } else {
+        ElMessage.error(res.data.data);
+      }
+    });
+}; // 获取表格数据
+
+const selectRows = (data) => {
+  state.selectedNum = data.allLength;
+  state.selection = data.selection;
+};
+const cleanSelected = () => {
+  rulesTable.value.clearTable();
+}; //清空
+
+const openDeleteTipDialog = (type, row) => {
+  state.dialogDeleteTips = true;
+  state.actionRow = row;
+  state.deleteType = type;
+};
+
+//打开删除弹窗
+const openDeleteDialog = () => {
+  if (state.deleteType === 2) {
+    const res = rulesTable.value.dealSelectData();
+    const list = Object.values(res);
+    if (list.length === 0) return ElMessage.warning("请选择要删除的数据");
+    state.dialogDelete = true;
+    const idList = list.map((item) => item.id);
+    state.deleteDialogConfig = { title: "批量删除", idList, tips: "确定要删除所选数据吗？" };
+    return;
+  }
+  const idList = [state.actionRow.id];
+  state.dialogDelete = true;
+  state.deleteDialogConfig = {
+    title: "删除",
+    idList: idList,
+    tips: "确定要删除当前行数据吗？",
+  };
+};
+
+//确定删除
+const confimDelete = () => {
+  ruleFormRef.value.validate((valid) => {
+    if (valid) {
+      const data = {
+        ids: state.deleteDialogConfig.idList.join(","),
+        delete_reason: state.ruleForm.delete_reason,
+      };
+
+      axios
+        .delete("/apaas/knowledge/v5/question/manage/ask", {
+          data,
+        })
+        .then((res) => {
+          if (res.data.code == 200) {
+            ElMessage.success("删除成功");
+            changePage(1);
+          } else {
+            ElMessage.error(res.data.data);
+          }
+        })
+        .finally(() => {
+          ruleFormRef.value.resetFields();
+          state.dialogDeleteTips = false;
+          state.dialogDelete = false;
+        });
+    }
+  });
+  return;
+};
+
+const {
+  filter,
+  headers,
+  tableRows,
+  tableTotal,
+  selectedNum,
+  questionObjOption,
+  dialogDeleteTips,
+  dialogDelete,
+  deleteDialogConfig,
+  ruleForm,
+  rules,
+} = toRefs(state);
+
+onBeforeMount(() => {
+  getTableRows();
+});
+</script>
+
+<style lang="scss" scoped>
+.page_container {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: stretch;
+  width: 100%;
+  padding: 0 24px;
+  min-height: 100%;
+  .main_container {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    flex-grow: 1;
+    width: 100%;
+    background-color: #fff;
+    box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
+    border-radius: 6px;
+    padding: 0 0 16px 0;
+    margin-bottom: 16px;
+    position: relative;
+    .sleceted_tip {
+      margin: 0 24px 0 40px;
+      vertical-align: middle;
+      font-size: 14px;
+      color: #404a62;
+      .num {
+        margin: 0 3px 0 3px;
+        font-weight: 600;
+        color: #202531;
+      }
+    }
+    .clean {
+      vertical-align: middle;
+      font-size: 14px;
+      color: #3759be;
+      cursor: pointer;
+    }
+    .filter-group {
+      .left-filter {
+        flex: 1;
+        display: flex;
+        justify-content: start;
+        flex-wrap: wrap;
+        .filter_item {
+          display: flex;
+          align-items: center;
+          .filter_title {
+            width: 84px;
+            white-space: pre-wrap;
+            font-weight: normal;
+          }
+        }
+      }
+      .right-action {
+        width: 144px;
+        padding-bottom: 16px;
+        .el-button {
+          width: 64px;
+        }
+      }
+    }
+    .table_container {
+      padding: 0 16px;
+      .el-table {
+        flex: 1;
+        .under_line {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+
+  :deep() .dialog_box_detail {
+    .el-dialog__body {
+      padding: 0 0 18px 0;
+      height: 580px;
+    }
+
+    .form_filter {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: 69px;
+      border-bottom: 1px solid #e6e9ef;
+      .right {
+        margin-right: 16px;
+        .el-button {
+          width: 64px;
+          &:last-child {
+            margin-left: 16px;
+          }
+        }
+      }
+    }
+    .table_content {
+      padding: 0 16px;
+    }
+  }
+}
+
+.dialog-alert {
+  text-align: left;
+  line-height: 24px;
+  .bg-icon {
+    margin-right: 8px;
+  }
+}
+</style>