소스 검색

总后台

liu_lake 6 달 전
부모
커밋
bde730e0bf

+ 2 - 2
admin-ui/.env.development

@@ -7,5 +7,5 @@ VITE_PUBLIC_PATH = ./
 # 开发环境路由历史模式(Hash模式传"hash"、HTML5模式传"h5"、Hash模式带base参数传"hash,base参数"、HTML5模式带base参数传"h5,base参数")
 VITE_ROUTER_HISTORY = "hash"
 # API访问路径
- VITE_API_SERVER = "http://admin.gagapay.pro/api"
-#VITE_API_SERVER = "http://www.sortebar.com/api"
+ VITE_API_SERVER = "https://admin.gagapay.pro/api"
+#VITE_API_SERVER = "https://www.sortebar.com/api"

+ 47 - 0
admin-ui/src/api/agent/index.ts

@@ -0,0 +1,47 @@
+import { Result, deleteRequest, get, post, put } from "../base";
+
+/**
+ * 分页查询
+ * @param query .
+ * @returns .
+ */
+export function queryPage<T>(query?: any): Promise<Result<T>> {
+  return get("/sys/pay/agent/page", query);
+}
+
+/**
+ * 列表查询
+ * @param query .
+ * @returns .
+ */
+export function queryList<T>(query?: any): Promise<Result<T>> {
+  return get("/sys/pay/agent/list", query);
+}
+
+/**
+ * 新增
+ * @param data .
+ * @returns .
+ */
+export function save<T>(data: any): Promise<Result<T>> {
+  return post("/sys/pay/agent/save", data);
+}
+
+/**
+ * 更新
+ * @param id .
+ * @param data .
+ * @returns  .
+ */
+export function update<T>(id: string, data: any): Promise<Result<T>> {
+  return put(`/sys/pay/agent/update/${id}`, {}, data);
+}
+
+/**
+ * 删除用户
+ * @param userIds .
+ * @returns  .
+ */
+export function del<T>(userIds: string[]): Promise<Result<T>> {
+  return deleteRequest(`/sys/pay/agent/remove`, {}, userIds);
+}

+ 38 - 0
admin-ui/src/api/platform/index.ts

@@ -0,0 +1,38 @@
+import { Result, deleteRequest, get, post, put } from "../base";
+
+/**
+ * 分页查询
+ * @param query .
+ * @returns .
+ */
+export function queryPage<T>(query?: any): Promise<Result<T>> {
+  return get("/sys/pay/agent/page", query);
+}
+
+/**
+ * 列表查询
+ * @param query .
+ * @returns .
+ */
+export function queryList<T>(query?: any): Promise<Result<T>> {
+  return get("/sys/pay/agent/list", query);
+}
+
+/**
+ * 新增
+ * @param data .
+ * @returns .
+ */
+export function save<T>(data: any): Promise<Result<T>> {
+  return post("/sys/pay/agent/save", data);
+}
+
+/**
+ * 更新
+ * @param id .
+ * @param data .
+ * @returns  .
+ */
+export function update<T>(id: string, data: any): Promise<Result<T>> {
+  return put(`/sys/pay/agent/update/${id}`, {}, data);
+}

+ 19 - 0
admin-ui/src/views/agent/index.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { reactive } from "vue";
+import list from "./modules/list.vue";
+
+defineOptions({
+  name: "agentManage"
+});
+const pageData: any = reactive({
+  mode: "table"
+});
+</script>
+
+<template>
+  <el-card :shadow="'never'">
+    <template #default>
+      <list :mode="pageData.mode" />
+    </template>
+  </el-card>
+</template>

+ 155 - 0
admin-ui/src/views/agent/modules/edit.vue

@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import { reactive, ref } from "vue";
+import * as $api from "@/api/agent/index";
+import { message } from "@/utils/message";
+import type { FormInstance } from "element-plus";
+import { cloneDeep } from "@pureadmin/utils";
+
+const title = "";
+defineOptions({ name: "templateEdit" });
+const isDetail = ref(false);
+const formRef = ref<FormInstance>();
+// 初始化数据
+const initData = {
+  userName: undefined,
+  password: undefined,
+  status: 1
+};
+
+// 表单校验规则
+const formRules = {};
+
+// 页面数据
+const pageData: any = reactive({
+  dialogVisible: false,
+  title: "",
+  formLoading: false,
+  mode: "add",
+  isUpdate: false,
+  // 表单数据
+  formData: initData,
+  formRules: formRules
+});
+// 暴露给父级调用
+const emits = defineEmits(["ok", "close"]);
+// 打开弹窗
+const open = (data: any, dataSource: any, mode: string) => {
+  pageData.formData = cloneDeep(data) || initData;
+  if (mode === "edit") {
+    pageData.title = `${title} - 编辑`;
+    isDetail.value = false;
+  } else if (mode === "detail") {
+    pageData.title = `${title} - 查看`;
+    isDetail.value = true;
+  } else {
+    pageData.title = `${title} - 新增`;
+    isDetail.value = false;
+  }
+  pageData.dataSource = dataSource;
+  pageData.isUpdate = !!pageData.formData.id;
+  pageData.dialogVisible = true;
+};
+// 关闭弹窗
+const handleClose = () => {
+  pageData.dialogVisible = false;
+  emits("close");
+};
+// 确定并关闭弹窗
+const handleConfirm = () => {
+  formRef.value!.validate((isValid: boolean) => {
+    if (isValid) {
+      const { id } = pageData.formData;
+      if (id) {
+        _update();
+      } else {
+        _save();
+      }
+    } else {
+      message("表单校验失败", { type: "warning" });
+    }
+  });
+};
+const _save = () => {
+  pageData.formLoading = true;
+  const _data = cloneDeep(pageData.formData);
+  $api
+    .save(_data)
+    .then((res: any) => {
+      if (res.success) {
+        _confirm();
+      } else {
+        message(res.message, { type: "warning" });
+      }
+    })
+    .finally(() => {
+      pageData.formLoading = false;
+    });
+};
+const _update = () => {
+  pageData.formLoading = true;
+  const _data = cloneDeep(pageData.formData);
+  $api
+    .update(pageData.formData.id, _data)
+    .then((res: any) => {
+      if (res.success) {
+        _confirm();
+      } else {
+        message(res.message, { type: "warning" });
+      }
+    })
+    .finally(() => {
+      pageData.formLoading = false;
+    });
+};
+const _confirm = () => {
+  pageData.dialogVisible = false;
+  emits("ok");
+};
+defineExpose({ open });
+</script>
+
+<template>
+  <el-dialog v-model="pageData.dialogVisible" destroy-on-close :width="500">
+    <template #header>
+      <el-text class="mx-1" type="primary" size="large">{{
+        pageData.title
+      }}</el-text>
+    </template>
+    <div class="el-dialog-content">
+      <el-form
+        ref="formRef"
+        :model="pageData.formData"
+        style="width: 90%; margin: 20px auto 0"
+        label-width="auto"
+        :rules="pageData.formRules"
+        :loading="pageData.formLoading"
+      >
+        <el-form-item label="代理名称" prop="userName">
+          <el-input
+            v-model="pageData.formData.userName"
+            clearable
+            placeholder="请输入名称"
+            size="small"
+            :readonly="isDetail"
+          />
+        </el-form-item>
+        <el-form-item label="密码" prop="password">
+          <el-input
+            v-model="pageData.formData.password"
+            type="password"
+            clearable
+            placeholder="请输入密码"
+            size="small"
+            :readonly="isDetail"
+          />
+        </el-form-item>
+      </el-form>
+    </div>
+    <template #footer>
+      <el-button v-if="!isDetail" @click="handleClose">取消</el-button>
+      <el-button v-if="!isDetail" type="primary" @click="handleConfirm"
+        >确认</el-button
+      >
+    </template>
+  </el-dialog>
+</template>

+ 371 - 0
admin-ui/src/views/agent/modules/list.vue

@@ -0,0 +1,371 @@
+<script setup lang="ts">
+import FormSearch, { type FormField } from "@/components/opts/form-search.vue";
+import TableButtons from "@/components/opts/btns2.vue";
+import Edit from "./edit.vue";
+import { PureTable } from "@pureadmin/table";
+import { computed, onBeforeMount, onMounted, reactive, ref, watch } from "vue";
+import * as $api from "@/api/agent/index";
+import { hasAuth } from "@/router/utils";
+import message from "@/utils/message";
+import { enableOptions } from "@/constants/constants";
+import { cloneDeep } from "@pureadmin/utils";
+
+const editRef = ref();
+
+defineOptions({
+  name: "agentList"
+});
+
+const props: any = defineProps({
+  mode: {
+    required: false,
+    type: String,
+    default: "table"
+  }
+});
+
+const searchFormFields = computed((): FormField[] => {
+  const fields: FormField[] = [
+    {
+      type: "input",
+      label: "代理商名称",
+      prop: "agentname",
+      placeholder: "请输入代理商名模糊查询"
+    },
+    {
+      type: "select",
+      label: "状态",
+      prop: "status",
+      placeholder: "请选择",
+      dataSourceKey: "enableOptions",
+      options: {
+        keys: {
+          label: "label",
+          value: "value",
+          prop: "value"
+        },
+        filterable: true
+      }
+    }
+  ];
+  if (props.mode === "table") {
+    return fields;
+  } else {
+    return fields;
+  }
+});
+
+const pageData: any = reactive({
+  mode: "table",
+  permission: {
+    query: ["user:query"],
+    save: ["user:save"],
+    update: ["user:update"],
+    del: ["user:del"]
+  },
+  searchParam: {
+    searchState: true,
+    searchForm: {}
+  },
+  dataSource: {
+    enableOptions: enableOptions
+  },
+  /*按钮 */
+  btnOpts: {
+    size: "small",
+    leftBtns: [
+      {
+        key: "add",
+        label: "新增",
+        type: "primary",
+        icon: "ep:plus",
+        state: true,
+        permission: ["user:save"]
+      }
+    ],
+    rightBtns: [
+      {
+        key: "search",
+        label: "查询",
+        icon: "ep:search",
+        state: true,
+        options: {
+          circle: true
+        }
+      },
+      {
+        key: "refresh",
+        label: "刷新",
+        icon: "ep:refresh",
+        state: true,
+        options: {
+          circle: true
+        }
+      }
+    ]
+  },
+  tableParam: {
+    list: [],
+    columns: [
+      {
+        label: "ID",
+        prop: "id",
+        slot: "id",
+        width: 220
+      },
+      {
+        label: "代理商名称",
+        prop: "userName",
+        slot: "userName"
+      },
+      {
+        label: "余额",
+        prop: "amount",
+        slot: "amount"
+      },
+      {
+        label: "谷歌校验器",
+        prop: "hasTpop",
+        slot: "hasTpop"
+      },
+      {
+        label: "状态",
+        prop: "status",
+        slot: "status"
+      },
+      {
+        label: "更新时间",
+        prop: "updateTime",
+        slot: "updateTime"
+      },
+      {
+        label: "操作",
+        fixed: "right",
+        slot: "operation"
+      }
+    ],
+    loading: false,
+    pagination: {
+      small: true,
+      pageSize: 10,
+      defaultPageSize: 10,
+      currentPage: 1,
+      background: true,
+      total: 0
+    }
+  }
+});
+
+const btnClickHandle = (val: string) => {
+  switch (val) {
+    case "add":
+      editRef.value!.open({ enable: 1 }, pageData.dataSource, "add");
+      break;
+    case "update":
+      break;
+    case "search":
+      _updateSearchState();
+      break;
+    case "refresh":
+      _loadData();
+      break;
+    case "switch":
+      break;
+    default:
+      break;
+  }
+};
+
+/**
+ *  更新搜索表单
+ * @param data .
+ */
+const _updateSearchFormData = (data: any) => {
+  pageData.searchParam.searchForm = data;
+};
+/**
+ * 点击搜索按钮
+ */
+const _searchForm = (data: any) => {
+  pageData.searchParam.searchForm = data;
+  _loadData();
+};
+/**
+ * 重置
+ */
+const _resetSearchForm = (data?: any) => {
+  pageData.searchParam.searchForm = data;
+};
+/**
+ * 更新搜索表达的状态
+ */
+const _updateSearchState = () => {
+  pageData.searchParam.searchState = !pageData.searchParam.searchState;
+};
+/**
+ * 分页 - 改变每页条数
+ * @param val .
+ */
+const handleChangePageSize = (val: any) => {
+  pageData.tableParam.pagination.pageSize = val;
+  _loadData();
+};
+/**
+ * 分页 - 改变页码
+ * @param val .
+ */
+const handleChangeCurrentPage = (val: any) => {
+  pageData.tableParam.pagination.currentPage = val;
+  _loadData();
+};
+/**
+ * 获取查询参数
+ */
+const getQueryParams = () => {
+  const sqp = {};
+  const param = Object.assign(sqp, pageData.searchParam.searchForm);
+  param.current = pageData.tableParam.pagination.currentPage;
+  param.size = pageData.tableParam.pagination.pageSize;
+  return param;
+};
+/**
+ * 获取列表数据
+ * @param page .
+ */
+const _loadData = (page?: number) => {
+  const query = getQueryParams();
+  if (page) {
+    query.current = page;
+  }
+  pageData.tableParam.loading = true;
+  $api
+    .queryPage(query)
+    .then((res: any) => {
+      if (res.success) {
+        pageData.tableParam.list = res.result.records;
+        pageData.tableParam.pagination.total = Number(res.result.total);
+      }
+    })
+    .finally(() => {
+      pageData.tableParam.loading = false;
+    });
+};
+/**
+ * 查看详情
+ * @param row .
+ */
+const handleDetail = (row: any) => {
+  editRef.value!.open(cloneDeep(row), pageData.dataSource, "detail");
+};
+/**
+ * 编辑
+ * @param row .
+ */
+const handleEdit = (row: any) => {
+  editRef.value!.open(cloneDeep(row), pageData.dataSource, "edit");
+};
+/**
+ * 删除
+ * @param row .
+ */
+const handleDel = (row: any) => {
+  message.confirm(`确认删除 id 为 (${row.id}) 的数据?`).then(() => {
+    batchDel([row.id]);
+  });
+};
+/**
+ * 批量删除
+ * @param ids .
+ */
+const batchDel = (ids: string[]) => {
+  if (ids && ids.length > 0) {
+    $api.del(ids).then((res: any) => {
+      if (res.success) {
+        message.success("删除成功");
+        _loadData();
+      } else {
+        message.warning(res.message);
+      }
+    });
+  }
+};
+watch(
+  () => props.orgInfo,
+  val => {
+    if (val) {
+      _loadData();
+    }
+  }
+);
+onBeforeMount(() => {});
+onMounted(() => {
+  _loadData(1);
+});
+</script>
+
+<template>
+  <div>
+    <form-search
+      size="small"
+      :show="pageData.searchParam.searchState"
+      :form-field="searchFormFields"
+      :data-source="pageData.dataSource"
+      :query-permission="pageData.permission.query"
+      @search-form="_updateSearchFormData"
+      @search="_searchForm"
+      @reset="_resetSearchForm"
+    />
+    <!--operate-->
+    <table-buttons
+      :size="pageData.btnOpts.size"
+      :left-btns="pageData.btnOpts.leftBtns"
+      :right-btns="pageData.btnOpts.rightBtns"
+      @click="btnClickHandle"
+    />
+    <!--table-->
+    <pure-table
+      :data="pageData.tableParam.list"
+      :columns="pageData.tableParam.columns"
+      row-key="id"
+      size="small"
+      border
+      stripe
+      :header-row-class-name="'table-header'"
+      :loading="pageData.tableParam.loading"
+      :pagination="pageData.tableParam.pagination"
+      @page-current-change="handleChangeCurrentPage"
+      @page-size-change="handleChangePageSize"
+    >
+      <template #ellipsis="{ row, column }">
+        <el-tooltip placement="top-start" :content="row[column.property]"
+          >{{ row[column.property] }}
+        </el-tooltip>
+      </template>
+      <template #enableScope="scope">
+        <el-tag v-if="scope.row.enable">启用</el-tag>
+        <el-tag v-else type="info">禁用</el-tag>
+      </template>
+      <template #operation="{ row }">
+        <div class="flex justify-center items-center">
+          <el-link
+            v-show="hasAuth(pageData.permission.update)"
+            type="primary"
+            @click="handleEdit(row)"
+            >编辑
+          </el-link>
+          <el-divider
+            v-show="hasAuth(pageData.permission.del)"
+            direction="vertical"
+          />
+          <el-link
+            v-show="hasAuth(pageData.permission.del)"
+            type="primary"
+            @click="handleDel(row)"
+            >删除
+          </el-link>
+        </div>
+      </template>
+    </pure-table>
+    <edit ref="editRef" @ok="_loadData" />
+  </div>
+</template>

+ 18 - 0
admin-ui/src/views/channel/index.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import FormSearch from "@/components/opts/form-search.vue";
+import TableButtons from "@/components/opts/btns2.vue";
+import ConfigEdit from "./modules/config-edit.vue";
+import { PureTable } from "@pureadmin/table";
+import { reactive, ref } from "vue";
+import { configTypeOptions } from "@/constants/constants";
+import * as $configApi from "@/api/sys/config";
+import { onMounted } from "vue";
+import { hasAuth } from "@/router/utils";
+import message from "@/utils/message";
+</script>
+
+<template>
+  <div>
+    通道管理
+  </div>
+</template>

+ 18 - 0
admin-ui/src/views/order/index.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import FormSearch from "@/components/opts/form-search.vue";
+import TableButtons from "@/components/opts/btns2.vue";
+import ConfigEdit from "./modules/config-edit.vue";
+import { PureTable } from "@pureadmin/table";
+import { reactive, ref } from "vue";
+import { configTypeOptions } from "@/constants/constants";
+import * as $configApi from "@/api/sys/config";
+import { onMounted } from "vue";
+import { hasAuth } from "@/router/utils";
+import message from "@/utils/message";
+</script>
+
+<template>
+  <div>
+    订单管理
+  </div>
+</template>

+ 19 - 0
admin-ui/src/views/platform/index.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { reactive } from "vue";
+
+defineOptions({
+  name: "platformSetting"
+});
+const pageData: any = reactive({
+  mode: "table"
+});
+</script>
+
+<template>
+  <el-card :shadow="'never'">
+        <div>服务商id</div>
+        <div>密钥</div>
+        <div>公钥</div>
+        <div>Google检验器</div>
+  </el-card>
+</template>

+ 195 - 3
admin-ui/src/views/welcome/index.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import CardInfo from "@/components/card-info/index.vue";
 defineOptions({
   name: "Welcome"
 });
@@ -6,9 +7,200 @@ defineOptions({
 
 <template>
   <div class="max-w-full">
-    <el-card style="width: 480px; border-radius: 8px" shadow="hover"
-      >Always</el-card
-    >
+    <el-tabs tab-position="top" style="height: 200px" class="demo-tabs">
+      <el-tab-pane label="本日概况">
+        <el-row :gutter="20" class="text-center" justify="space-evenly">
+          <el-col :span="6"
+            ><card-info bg-color="#000" icon="add" title="注册人数" :data="0"
+          /></el-col>
+          <el-col :span="6"
+            ><card-info bg-color="#000" icon="add" title="游戏人数" :data="0"
+          /></el-col>
+          <el-col :span="6"
+            ><card-info bg-color="#000" icon="add" title="充值人数" :data="0"
+          /></el-col>
+          <el-col :span="6"
+            ><card-info bg-color="#000" icon="add" title="提现人数" :data="0"
+          /></el-col>
+          <el-col :span="6"
+            ><card-info
+              bg-color="#000"
+              icon="income"
+              prefix="$"
+              title="流水"
+              :data="0"
+          /></el-col>
+          <el-col :span="6"
+            ><card-info
+              bg-color="#000"
+              icon="money2"
+              prefix="$"
+              title="盈亏"
+              :data="0"
+          /></el-col>
+          <el-col :span="6"
+            ><card-info
+              bg-color="#000"
+              icon="in"
+              prefix="$"
+              title="充值"
+              :data="0"
+          /></el-col>
+          <el-col :span="6"
+            ><card-info
+              bg-color="#000"
+              icon="out"
+              prefix="$"
+              title="提现"
+              :data="0"
+          /></el-col>
+        </el-row>
+      </el-tab-pane>
+      <el-tab-pane label="本周概况">
+        <el-row :gutter="20" class="text-center" justify="space-evenly">
+          <el-col :span="6"
+            ><card-info bg-color="#000" icon="add" title="注册人数" :data="0"
+          /></el-col>
+          <el-col :span="6"
+            ><card-info bg-color="#000" icon="add" title="游戏人数" :data="0"
+          /></el-col>
+          <el-col :span="6"
+            ><card-info bg-color="#000" icon="add" title="充值人数" :data="0"
+          /></el-col>
+          <el-col :span="6"
+            ><card-info bg-color="#000" icon="add" title="提现人数" :data="0"
+          /></el-col>
+          <el-col :span="6"
+            ><card-info
+              bg-color="#000"
+              icon="income"
+              prefix="$"
+              title="流水"
+              :data="0"
+          /></el-col>
+          <el-col :span="6"
+            ><card-info
+              bg-color="#000"
+              icon="money2"
+              prefix="$"
+              title="盈亏"
+              :data="0"
+          /></el-col>
+          <el-col :span="6"
+            ><card-info
+              bg-color="#000"
+              icon="in"
+              prefix="$"
+              title="充值"
+              :data="0"
+          /></el-col>
+          <el-col :span="6"
+            ><card-info
+              bg-color="#000"
+              icon="out"
+              prefix="$"
+              title="提现"
+              :data="0"
+          /></el-col>
+        </el-row>
+      </el-tab-pane>
+      <el-tab-pane label="本月概况">
+        <el-row :gutter="20" class="text-center" justify="space-evenly">
+          <el-col :span="6"
+            ><card-info bg-color="#000" icon="add" title="注册人数" :data="0"
+          /></el-col>
+          <el-col :span="6"
+            ><card-info bg-color="#000" icon="add" title="游戏人数" :data="0"
+          /></el-col>
+          <el-col :span="6"
+            ><card-info bg-color="#000" icon="add" title="充值人数" :data="0"
+          /></el-col>
+          <el-col :span="6"
+            ><card-info bg-color="#000" icon="add" title="提现人数" :data="0"
+          /></el-col>
+          <el-col :span="6"
+            ><card-info
+              bg-color="#000"
+              icon="income"
+              prefix="$"
+              title="流水"
+              :data="0"
+          /></el-col>
+          <el-col :span="6"
+            ><card-info
+              bg-color="#000"
+              icon="money2"
+              prefix="$"
+              title="盈亏"
+              :data="0"
+          /></el-col>
+          <el-col :span="6"
+            ><card-info
+              bg-color="#000"
+              icon="in"
+              prefix="$"
+              title="充值"
+              :data="0"
+          /></el-col>
+          <el-col :span="6"
+            ><card-info
+              bg-color="#000"
+              icon="out"
+              prefix="$"
+              title="提现"
+              :data="0"
+          /></el-col>
+        </el-row>
+      </el-tab-pane>
+      <el-tab-pane label="历史概况">
+        <el-row :gutter="20" class="text-center" justify="space-evenly">
+          <el-col :span="6"
+            ><card-info bg-color="#000" icon="add" title="注册人数" :data="0"
+          /></el-col>
+          <el-col :span="6"
+            ><card-info bg-color="#000" icon="add" title="游戏人数" :data="0"
+          /></el-col>
+          <el-col :span="6"
+            ><card-info bg-color="#000" icon="add" title="充值人数" :data="0"
+          /></el-col>
+          <el-col :span="6"
+            ><card-info bg-color="#000" icon="add" title="提现人数" :data="0"
+          /></el-col>
+          <el-col :span="6"
+            ><card-info
+              bg-color="#000"
+              icon="income"
+              prefix="$"
+              title="流水"
+              :data="0"
+          /></el-col>
+          <el-col :span="6"
+            ><card-info
+              bg-color="#000"
+              icon="money2"
+              prefix="$"
+              title="盈亏"
+              :data="0"
+          /></el-col>
+          <el-col :span="6"
+            ><card-info
+              bg-color="#000"
+              icon="in"
+              prefix="$"
+              title="充值"
+              :data="0"
+          /></el-col>
+          <el-col :span="6"
+            ><card-info
+              bg-color="#000"
+              icon="out"
+              prefix="$"
+              title="提现"
+              :data="0"
+          /></el-col>
+        </el-row>
+      </el-tab-pane>
+    </el-tabs>
   </div>
 </template>