feat: 页面新建

2 years ago · fc4fe75d24
parent 8dd004d039
commit fc4fe75d24
12 changed files with 305 additions and 382 deletions
--- a/build/info.ts
+++ b/build/info.ts
@ -17,15 +17,7 @@ export function viteBuildInfo(): Plugin {
      outDir = resolvedConfig.build?.outDir ?? "dist";
    },
    buildStart() {
-      console.log(
-        bold(
-          green(
-            `👏欢迎使用${blue(
-              "[tp-admin]"
-            )}，如果您感觉不错，记得点击后面链接给个star哦💖 https://github.com/pure-admin/vue-pure-admin`
-          )
-        )
-      );
+      console.log(bold(green(`👏欢迎使用${blue("[tp-admin]")}`)));
      if (config.command === "build") {
        startTime = dayjs(new Date());
      }
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/logo.svg
+++ b/public/logo.svg
@ -1 +1,94 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024"><path fill="#386BF3" d="M410.558.109c0 210.974-300.876 361.752-300.876 633.548 0 174.943 134.704 316.787 300.876 316.787s300.877-141.817 300.877-316.787C711.408 361.752 410.558 210.974 410.558.109z"/><path fill="#C3D2FB" d="M613.469 73.665c0 211.055-300.877 361.914-300.877 633.547C312.592 882.156 447.296 1024 613.47 1024s300.876-141.817 300.876-316.788C914.29 435.58 613.469 284.72 613.469 73.665z"/><path fill="#303F5B" d="M312.592 707.212c0-183.713 137.636-312.171 226.723-441.39 81.702 106.112 172.12 218.74 172.12 367.726A309.755 309.755 0 0 1 420.36 950.064a323.114 323.114 0 0 1-107.769-242.852z"/></svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">  <image id="image0" width="300" height="300" x="0" y="0"
+    href="data:image/png;base64,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" />
+</svg>
--- a/public/serverConfig.json
+++ b/public/serverConfig.json
@ -19,5 +19,5 @@
  "CachingAsyncRoutes": false,
  "TooltipEffect": "light",
  "ResponsiveStorageNameSpace": "responsive-",
-  "AdminHostUrl": "http://192.168.10.13:8000/api/"
+  "AdminHostUrl": "http://192.168.10.81:8848/"
 }
--- a/src/api/user.ts
+++ b/src/api/user.ts
@ -1,5 +1,5 @@
 import { http } from "@/utils/http";
-import {getConfig} from "@/config";
+// import { getConfig } from "@/config";

 export type UserResult = {
  success: boolean;
@ -32,16 +32,16 @@ export type RefreshTokenResult = {
 };

 /** 登录 */
-// export const getLogin = (data?: object) => {
-//   return http.request<UserResult>("post", "/login", { data });
-// };
-
 export const getLogin = (data?: object) => {
-  const AdminHostUrl = getConfig().AdminHostUrl;
-  const url = AdminHostUrl + "login"
-  return http.request<UserResult>("post", url, { data });
+  return http.request<UserResult>("post", "/login", { data });
 };

+// export const getLogin = (data?: object) => {
+//   const AdminHostUrl = getConfig().AdminHostUrl;
+//   const url = AdminHostUrl + "login";
+//   return http.request<UserResult>("post", url, { data });
+// };
+
 /** 刷新token */
 export const refreshTokenApi = (data?: object) => {
  return http.request<RefreshTokenResult>("post", "/refreshToken", { data });
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@ -10,16 +10,16 @@ export default {
    {
      path: "/system/user/index",
      name: "users",
-      // component: () => import("@/views/system/user/index.vue"),
-      component: () => import("@/views/common/common.vue"),
+      component: () => import("@/views/system/user/index.vue"),
+      // component: () => import("@/views/common/common.vue"),
      meta: {
        title: "用户"
      }
    },
    {
-      path: "/system/roles",
+      path: "/system/roles/index",
      name: "roles",
-      component: () => import("@/views/common/common.vue"),
+      component: () => import("@/views/system/roles/index.vue"),
      meta: {
        title: "角色"
      }
--- a/src/style/login.css
+++ b/src/style/login.css
@ -10,7 +10,9 @@
  width: 100vw;
  height: 100vh;
  display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  /* grid-template-columns: repeat(2, 1fr); */
+  align-items: center;
+  justify-content: center;
  grid-gap: 18rem;
  padding: 0 2rem;
 }
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@ -8,9 +8,9 @@ import type { FormInstance } from "element-plus";
 import { useLayout } from "@/layout/hooks/useLayout";
 import { useUserStoreHook } from "@/store/modules/user";
 import { initRouter, getTopMenu } from "@/router/utils";
-import { bg, avatar, illustration } from "./utils/static";
+import { avatar } from "./utils/static";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import { ref, reactive, toRaw, onMounted, onBeforeUnmount } from "vue";
+import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
 import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";

 import dayIcon from "@/assets/svg/day.svg?component";
@ -43,7 +43,10 @@ const onLogin = async (formEl: FormInstance | undefined) => {
  await formEl.validate((valid, fields) => {
    if (valid) {
      useUserStoreHook()
-        .loginByUsername({ username: ruleForm.username, password: ruleForm.password })
+        .loginByUsername({
+          username: ruleForm.username,
+          password: ruleForm.password
+        })
        .then(res => {
          if (res.success) {
            // 获取后端路由
@ -81,7 +84,7 @@ onBeforeUnmount(() => {

 <template>
  <div class="select-none">
-    <img :src="bg" class="wave" />
+    <!-- <img :src="bg" class="wave" /> -->
    <div class="flex-c absolute right-5 top-3">
      <!-- 主题 -->
      <el-switch
@ -93,9 +96,9 @@ onBeforeUnmount(() => {
      />
    </div>
    <div class="login-container">
-      <div class="img">
+      <!-- <div class="img">
        <component :is="toRaw(illustration)" />
-      </div>
+      </div> -->
      <div class="login-box">
        <div class="login-form">
          <avatar class="avatar" />
--- a/src/views/permission/page/index.vue
+++ b/src/views/permission/page/index.vue
@ -45,7 +45,7 @@ function onChange() {
 <template>
  <el-space direction="vertical" size="large">
    <el-tag :style="elStyle" size="large" effect="dark">
-      模拟后台根据不同角色返回对应路由（具体参考完整版pure-admin代码）
+      模拟后台根据不同角色返回对应路由
    </el-tag>
    <el-card shadow="never" :style="elStyle">
      <template #header>
--- a/src/views/system/user/hook.tsx
+++ b/src/views/system/user/hook.tsx
@ -1,285 +0,0 @@
-import dayjs from "dayjs";
-import { message } from "@/utils/message";
-// import { getUserList } from "@/api/system";
-import { ElMessageBox } from "element-plus";
-import { type PaginationProps } from "@pureadmin/table";
-import { reactive, ref, computed, onMounted } from "vue";
-import { http } from "@/utils/http";
-
-export function useUser() {
-  const form = reactive({
-    username: "",
-    mobile: "",
-    status: ""
-  });
-  const dataList = ref([]);
-  const loading = ref(true);
-  const switchLoadMap = ref({});
-  const pagination = reactive<PaginationProps>({
-    total: 0,
-    pageSize: 10,
-    currentPage: 1,
-    background: true
-  });
-  const columns: TableColumnList = [
-    {
-      label: "序号",
-      type: "index",
-      width: 70,
-      fixed: "left"
-    },
-    // {
-    //   label: "用户编号",
-    //   prop: "id",
-    //   minWidth: 130
-    // },
-    {
-      label: "用户名称",
-      prop: "username",
-      minWidth: 130
-    },
-    // {
-    //   label: "用户昵称",
-    //   prop: "nickname",
-    //   minWidth: 130
-    // },
-    {
-      label: "性别",
-      prop: "sex",
-      minWidth: 90,
-      cellRenderer: ({ row, props }) => (
-        <el-tag
-          size={props.size}
-          type={row.sex === 1 ? "danger" : ""}
-          effect="plain"
-        >
-          {row.sex === 1 ? "女" : "男"}
-        </el-tag>
-      )
-    },
-    {
-      label: "组织",
-      prop: "dept",
-      minWidth: 90,
-      formatter: ({ dept }) => dept.name
-    },
-    {
-      label: "手机号码",
-      prop: "mobile",
-      minWidth: 90
-    },
-    {
-      label: "状态",
-      prop: "status",
-      minWidth: 90,
-      cellRenderer: scope => (
-        <el-switch
-          size={scope.props.size === "small" ? "small" : "default"}
-          loading={switchLoadMap.value[scope.index]?.loading}
-          v-model={scope.row.status}
-          active-value={1}
-          inactive-value={0}
-          active-text="已开启"
-          inactive-text="已关闭"
-          inline-prompt
-          onChange={() => onChange(scope as any)}
-        />
-      )
-    },
-    {
-      label: "创建时间",
-      minWidth: 90,
-      prop: "createTime",
-      formatter: ({ createTime }) =>
-        dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
-    },
-    {
-      label: "操作",
-      fixed: "right",
-      width: 180,
-      slot: "operation"
-    }
-  ];
-  const buttonClass = computed(() => {
-    return [
-      "!h-[20px]",
-      "reset-margin",
-      "!text-gray-500",
-      "dark:!text-white",
-      "dark:hover:!text-primary"
-    ];
-  });
-
-  function onChange({ row, index }) {
-    ElMessageBox.confirm(
-      `确认要<strong>${
-        row.status === 0 ? "停用" : "启用"
-      }</strong><strong style='color:var(--el-color-primary)'>${
-        row.username
-      }</strong>用户吗?`,
-      "系统提示",
-      {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-        dangerouslyUseHTMLString: true,
-        draggable: true
-      }
-    )
-      .then(() => {
-        switchLoadMap.value[index] = Object.assign(
-          {},
-          switchLoadMap.value[index],
-          {
-            loading: true
-          }
-        );
-        setTimeout(() => {
-          switchLoadMap.value[index] = Object.assign(
-            {},
-            switchLoadMap.value[index],
-            {
-              loading: false
-            }
-          );
-          message("已成功修改用户状态", {
-            type: "success"
-          });
-        }, 300);
-      })
-      .catch(() => {
-        row.status === 0 ? (row.status = 1) : (row.status = 0);
-      });
-  }
-
-  function handleUpdate(row) {
-    console.log(row);
-  }
-
-  function handleDelete(row) {
-    console.log(row);
-  }
-
-  function handleSizeChange(val: number) {
-    console.log(`${val} items per page`);
-  }
-
-  function handleCurrentChange(val: number) {
-    console.log(`current page: ${val}`);
-  }
-
-  function handleSelectionChange(val) {
-    console.log("handleSelectionChange", val);
-  }
-
-  const userList = {
-    list: [
-      {
-        username: "admin",
-        nickname: "admin",
-        remark: "管理员",
-        deptId: 103,
-        postIds: [1],
-        mobile: "15888888888",
-        sex: 0,
-        id: 1,
-        status: 0,
-        createTime: 1605456000000,
-        dept: {
-          id: 103,
-          name: "研发部门"
-        }
-      },
-      {
-        username: "pure",
-        nickname: "pure",
-        remark: "不要吓我",
-        deptId: 104,
-        postIds: [1],
-        mobile: "15888888888",
-        sex: 0,
-        id: 100,
-        status: 1,
-        createTime: 1605456000000,
-        dept: {
-          id: 104,
-          name: "市场部门"
-        }
-      },
-      {
-        username: "lucy",
-        nickname: "girl",
-        remark: null,
-        deptId: 106,
-        postIds: null,
-        mobile: "15888888888",
-        sex: 1,
-        id: 103,
-        status: 1,
-        createTime: 1605456000000,
-        dept: {
-          id: 106,
-          name: "财务部门"
-        }
-      },
-      {
-        username: "mike",
-        nickname: "boy",
-        remark: null,
-        deptId: 107,
-        postIds: [],
-        mobile: "15888888888",
-        sex: 0,
-        id: 104,
-        status: 0,
-        createTime: 1605456000000,
-        dept: {
-          id: 107,
-          name: "运维部门"
-        }
-      }
-    ],
-    total: 4
-  };
-
-  function getUserList() {
-    // http.request("post", "/login")
-    return userList;
-  }
-
-  async function onSearch() {
-    loading.value = true;
-    const data = getUserList();
-    dataList.value = data.list;
-    pagination.total = data.total;
-    setTimeout(() => {
-      loading.value = false;
-    }, 500);
-  }
-
-  const resetForm = formEl => {
-    if (!formEl) return;
-    formEl.resetFields();
-    onSearch();
-  };
-
-  onMounted(() => {
-    onSearch();
-  });
-
-  return {
-    form,
-    loading,
-    columns,
-    dataList,
-    pagination,
-    buttonClass,
-    onSearch,
-    resetForm,
-    handleUpdate,
-    handleDelete,
-    handleSizeChange,
-    handleCurrentChange,
-    handleSelectionChange
-  };
-}
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import { useUser } from "./hook";
+import { useUser } from "./utils/hook";
 import { PureTableBar } from "@/components/RePureTableBar";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import { PureTable } from "@pureadmin/table";
@ -14,7 +14,6 @@ import Search from "@iconify-icons/ep/search";
 import Refresh from "@iconify-icons/ep/refresh";
 import AddFill from "@iconify-icons/ri/add-circle-line";

-
 defineOptions({
  name: "User"
 });
@ -28,6 +27,7 @@ const {
  pagination,
  buttonClass,
  onSearch,
+  openDialog,
  resetForm,
  handleUpdate,
  handleDelete,
@ -91,7 +91,11 @@ const {

      <PureTableBar title="用户管理" :columns="columns" @refresh="onSearch">
        <template #buttons>
-          <el-button type="primary" :icon="useRenderIcon(AddFill)">
+          <el-button
+            type="primary"
+            :icon="useRenderIcon(AddFill)"
+            @click="openDialog()"
+          >
            新增用户
          </el-button>
        </template>
--- a/src/views/welcome/index.vue
+++ b/src/views/welcome/index.vue
@ -1,8 +1,11 @@
 <script setup lang="ts">
 import axios from "axios";
-import { onMounted, ref } from "vue";
-import dplayer from "@/components/VideoPlayer/MyPlayer.vue";
-import OurPlayer from "@/components/VideoPlayer/OurPlayer.vue";
+import { onMounted, ref, reactive } from "vue";
+// import dplayer from "@/components/VideoPlayer/MyPlayer.vue";
+// import OurPlayer from "@/components/VideoPlayer/OurPlayer.vue";
+import { PureTableBar } from "@/components/RePureTableBar";
+import { PureTable } from "@pureadmin/table";
+import { type PaginationProps } from "@pureadmin/table";
 import { ElMessageBox, ElMessage } from "element-plus";
 import { getConfig } from "@/config";
 import { getToken, formatToken } from "@/utils/auth";
@ -33,26 +36,25 @@ const tableData = ref([]);
 const eventMap = ref({});

 const violationMap = ref({
-  "是": "1",
-  "否": "0",
-  "所有": "2"
-})
-
-
-function playVideo(data) {
-  data = JSON.parse(JSON.stringify(data));
-  // console.log(AdminHostUrl)
-  dialogVisible.value = true;
-  const highlights = [
-    // 进度条时间点高亮
-    {
-      text: data.event_type,
-      time: data.relative_time
-    }
-  ];
-  sessionStorage.setItem("video_url", data.video_dir);
-  sessionStorage.setItem("highlights", JSON.stringify(highlights));
-}
+  是: "1",
+  否: "0",
+  所有: "2"
+});
+
+// function playVideo(data) {
+//   data = JSON.parse(JSON.stringify(data));
+//   // console.log(AdminHostUrl)
+//   dialogVisible.value = true;
+//   const highlights = [
+//     // 进度条时间点高亮
+//     {
+//       text: data.event_type,
+//       time: data.relative_time
+//     }
+//   ];
+//   sessionStorage.setItem("video_url", data.video_dir);
+//   sessionStorage.setItem("highlights", JSON.stringify(highlights));
+// }

 function onSearch() {
  let start_time;
@ -88,12 +90,18 @@ function onSearch() {
      } else {
        tableData.value = response.data.results;
      }
+      setTimeout(() => {
+        loading.value = false;
+      }, 500);
    })
    .catch(error => {
      ElMessage({
        message: "网络暂不通畅",
        type: "warning"
-      })
+      });
+      setTimeout(() => {
+        loading.value = false;
+      }, 500);
      console.log(error);
    });
 }
@ -129,7 +137,6 @@ const handleClose = (done: () => void) => {
 };

 function getEvents() {
-
  axios({
    url: AdminHostUrl + "events",
    headers: {
@ -144,19 +151,72 @@ function getEvents() {
      ElMessage({
        message: "网络暂不通畅",
        type: "warning"
-      })
+      });
      console.log(error);
    });
-
 }

-function pickerOptions(time){
-  return time.getTime() > Date.now()
+function pickerOptions(time) {
+  return time.getTime() > Date.now();
 }

 const now_date = new Date();
-now_date.setMonth(now_date.getMonth() - 1)
-const lastMonth = now_date
+now_date.setMonth(now_date.getMonth() - 1);
+const lastMonth = now_date;
+
+const columns: TableColumnList = [
+  {
+    label: "记录仪日期时间",
+    prop: "record_time",
+    minWidth: 100,
+    sortable: true
+  },
+  {
+    label: "警号",
+    prop: "police_id",
+    minWidth: 100
+  },
+  {
+    label: "违法行为",
+    prop: "event_type",
+    minWidth: 100
+  },
+  {
+    label: "是否违规",
+    prop: "is_violation",
+    minWidth: 100
+  },
+  {
+    label: "违规行为",
+    prop: "ai_analysis",
+    minWidth: 100
+  },
+  {
+    label: "时间点",
+    prop: "relative_time",
+    minWidth: 100
+  },
+  {
+    label: "缩率图",
+    slot: "image"
+  },
+  {
+    label: "车牌号",
+    prop: "car_number",
+    minWidth: 100
+  },
+  {
+    label: "视频",
+    slot: "video"
+  }
+];
+const loading = ref(true);
+const pagination = reactive<PaginationProps>({
+  total: totalNumber.value,
+  pageSize: pageSize.value,
+  currentPage: currentPage.value,
+  background: true
+});

 onMounted(() => {
  onSearch();
@ -164,16 +224,20 @@ onMounted(() => {
 </script>

 <template>
-  <div class="hello">
+  <div class="main">
    <el-dialog
      width="60%"
      v-model="dialogVisible"
      :before-close="handleClose"
      destroy-on-close
    >
-      <our-player></our-player>
+      <our-player />
    </el-dialog>
-    <el-form :inline="true" :model="formInline" class="demo-form-inline">
+    <el-form
+      :inline="true"
+      :model="formInline"
+      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
+    >
      <el-form-item label="日期:" style="font-weight: bold">
        <el-date-picker
          v-model="formInline.date"
@ -189,24 +253,53 @@ onMounted(() => {
      </el-form-item>

      <el-form-item label="警号:">
-        <el-input v-model="formInline.policeId" placeholder="警号" clearable style="width: 198px" />
+        <el-input
+          v-model="formInline.policeId"
+          placeholder="警号"
+          clearable
+          style="width: 198px"
+        />
      </el-form-item>

      <el-form-item label="违法行为:">
        <!--        <el-input v-model="formInline.event" placeholder="事件"/>-->
-        <el-select v-model="formInline.event" placeholder="违法行为" clearable @click="getEvents">
-          <el-option v-for="(event, type) in eventMap" :key="type" :label="event" :value="event"></el-option>
+        <el-select
+          v-model="formInline.event"
+          placeholder="违法行为"
+          clearable
+          @click="getEvents"
+        >
+          <el-option
+            v-for="(event, type) in eventMap"
+            :key="type"
+            :label="event"
+            :value="event"
+          />
        </el-select>
      </el-form-item>

      <el-form-item label="是否违规:">
-        <el-select v-model="formInline.violation" placeholder="是否违规" clearable>
-          <el-option v-for="(event, type) in violationMap" :key="event" :label="type" :value="type"></el-option>
+        <el-select
+          v-model="formInline.violation"
+          placeholder="是否违规"
+          clearable
+        >
+          <el-option
+            v-for="(event, type) in violationMap"
+            :key="event"
+            :label="type"
+            :value="type"
+          />
        </el-select>
      </el-form-item>

      <el-form-item label="违规行为:">
-        <el-input v-model="formInline.violationType" placeholder="违规行为" clearable style="width: 198px" />
+        <el-input
+          v-model="formInline.violationType"
+          placeholder="违规行为"
+          clearable
+          style="width: 198px"
+        />
      </el-form-item>

      <el-form-item>
@ -214,14 +307,47 @@ onMounted(() => {
      </el-form-item>

      <el-form-item>
-        <el-button @click="handleRefresh"
-        >刷新
-        </el-button
-        >
+        <el-button @click="handleRefresh">刷新 </el-button>
      </el-form-item>
    </el-form>
-
-    <el-table
+    <PureTableBar title="首页列表" :columns="columns" @refresh="onSearch">
+      <template v-slot="{ size, dynamicColumns }">
+        <pure-table
+          border
+          adaptive
+          align-whole="center"
+          table-layout="auto"
+          :loading="loading"
+          :size="size"
+          :data="tableData"
+          :columns="dynamicColumns"
+          :pagination="pagination"
+          :paginationSmall="size === 'small' ? true : false"
+          :header-cell-style="{
+            background: 'var(--el-table-row-hover-bg-color)',
+            color: 'var(--el-text-color-primary)'
+          }"
+          @page-size-change="handleSizeChange"
+          @page-current-change="handleCurrentChange"
+        >
+          <template #image="{ row, index }">
+            <el-image
+              preview-teleported
+              loading="lazy"
+              :src="row.image"
+              :preview-src-list="[row.small_image]"
+              :initial-index="index"
+            />
+          </template>
+          <template #video="{ row }">
+            <video width="180" height="180" controls>
+              <source :src="row.video_dir" type="video/mp4" />
+            </video>
+          </template>
+        </pure-table>
+      </template>
+    </PureTableBar>
+    <!-- <el-table
      :data="tableData"
      stripe
      :default-sort="{ prop: 'record_time', order: 'descending' }"
@ -229,13 +355,7 @@ onMounted(() => {
    >
      <el-table-column prop="record_time" sortable label="记录仪日期时间" />
      <el-table-column prop="police_id" label="警号" />
-      <el-table-column prop="event_type" label="违法行为">
-<!--        <template v-slot="scope">-->
-<!--          <span>-->
-<!--            {{ scope.row.event_type || "未定义事件" }}-->
-<!--          </span>-->
-<!--        </template>-->
-      </el-table-column>
+      <el-table-column prop="event_type" label="违法行为" />

      <el-table-column prop="is_violation" label="是否违规">
        <template v-slot="scope">
@ -270,9 +390,7 @@ onMounted(() => {
            <span v-if="scope.row.video_dir">播放视频</span>
            <span v-else>暂无视频</span>
          </el-button>
-
        </template>
-
      </el-table-column>
    </el-table>
    <el-pagination
@ -284,7 +402,7 @@ onMounted(() => {
      v-model:page-size="pageSize"
      layout="total, sizes, prev, pager, next"
      :total="totalNumber"
-    />
+    /> -->
  </div>
 </template>

@ -294,11 +412,8 @@ h3 {
 }

 ul {
-  list-style-type: none;
  padding: 0;
-}
-
-li {
+  list-style-type: none;
 }

 a {
@ -307,13 +422,13 @@ a {

 .hello {
  margin: 5px auto;
-  text-align: right;
  overflow: hidden;
+  text-align: right;
 }

 .demo-form-inline {
-  align-items: center;
  display: flex;
+  align-items: center;
  justify-content: flex-end;
  margin: 0 auto;
 }
@ -323,5 +438,4 @@ a {
  justify-content: flex-end;
  margin: 0 auto;
 }
-
 </style>