@sugarat/easypicker2-client 2.4.3 → 2.6.0

package/docs/plan/todo.md

@@ -1,127 +0,0 @@
-# 进展情况
-> 问题反馈交流新“地盘” => [EasyPicker](https://support.qq.com/product/444158)
-
-列举待办的内容
-* ❌: 未开始
-* 🧱: 规划中 
-* ✅: 已上线
-
-已解决&完成的问题将会在页末折叠展示
-## Bug
-| 序号 | 简介                        | 来源 | 进度 | 补充             |
-| ---- | --------------------------- | ---- | ---- | ---------------- |
-| 1    | iOS侧微信中填写表单渲染异常 | QQ群 | ❌    | 无设备，无法复现 |
-
-## Feature
-| 序号 | 简介                                                           | 来源   | 进度 |
-| ---- | -------------------------------------------------------------- | ------ | ---- |
-| 1    | 使用手册                                                       | 问卷   | 🧱    |
-| 2    | 支持查看历史的生成下载记录(包含归档文件，避免重复生成归档文件) | -      | 🧱    |
-| 3    | 文件提交，限制人员可提交次数（重复提交自动覆盖）               | QQ群   | ❌    |
-| 4    | 人员提交情况列表的图片缩略图+预览                              | QQ群   | ❌    |
-| 5    | 接口耗时统计                                                   | -      | 🧱    |
-| 6    | 支持在任务页切换同一分类下的其它任务                           | GitHub | ❌    |
-| 7    | 存储支持 oneDrive                                              | QQ群   | ❌    |
-| 8    | 支持用户自主绑定/换绑手机号                                    | -      | ❌    |
-| 9    | 任务支持多个账号共享查看数据 => 任务提交数据查看外链           | QQ群   | ❌    |
-| 10   | 提供docker镜像，一键部署应用                                   | -      | ❌    |
-| 11   | 页面中记录最近操作的任务                                       | -      | ❌    |
-| 12   | 自动部署脚本不使用机器构建，直接拉取对应产物                   | -      | ❌    |
-
-## UI
-| 序号 | 简介                                 | 来源   | 进度 |
-| ---- | ------------------------------------ | ------ | ---- |
-| 1    | 固定创建任务入口（PC/Mobile）        | GitHub | ❌    |
-| 2    | 支持移动端滑动任务设置面板的顶部菜单 | QQ群   | ✅    |
-| 3    | 支持展示预览图片的名称               | QQ群   | ✅    |
-
-
-## 完成已归档
-:::details bug 🐛
-| 序号 | 简介                                                            | 来源 | 进度 |
-| ---- | --------------------------------------------------------------- | ---- | ---- |
-| 1    | Excel报表下载打开乱码                                           | 问卷 | ✅    |
-| 2    | 下载时，会自动预览浏览器支持的文件（可以先用批量下载解决）      | -    | ✅    |
-| 3    | 创建任务后，分类列表进行了刷新                                  | -    | ✅    |
-| 4    | 带特殊字符的文件，批量下载失败                                  | QQ群 | ✅    |
-| 5    | 人员限制，部分可以提交部分不可以                                | QQ群 | ✅    |
-| 6    | 批量操作UI卡顿                                                  | -    | ✅    |
-| 7    | 单个文件记录删除，导致指向同一文件删除                          | QQ群 | ✅    |
-| 8    | 批量文件记录删除，导致指向同一文件删除                          | QQ群 | ✅    |
-| 9    | 任务删除，未删除关联文件OSS上的资源（不删除，将其单独展示出来） | QQ群 | ✅    |
-| 10   | 提交文件，未选择文件也会弹窗                                    | QQ群 | ✅    |
-| 11   | 撤回文件时，导致指向同一文件删除                                | -    | ✅    |
-| 12   | 接入腾讯云短信，少暴露了个人签名变量                            | -    | ✅    |
-| 13   | 上传文件未正确处理 ? 特殊字符                                   | QQ   | ✅    |
-| 14   | PC/H5来回切换导航栏展示异常                                     | -    | ✅    |
-| 15   | 服务在 windows上无法正常运行                                    | QQ群 | ✅    |
-| 16   | blob文件下载失败                                                | QQ群 | ✅    |
-| 17   | 无token情况下直接访问/dashboard路由报错                         | QQ群 | ✅    |
-| 18   | 登录后重定向到登录页                                            | QQ群 | ✅    |
-| 19   | Excel文件下载失败、Excel报表下载打开乱码                        | QQ群 | ✅    |  |
-| 20   | 页面 问题缺少 反馈入口                                          | -    | ✅    |  |
-| 21   | 表单项过多，无法渲染，同时影响创建更新                          | QQ群 | ✅    |  |
-|      |                                                                 |      |      |
-:::
-
-:::details features ⭐️
-
-| 序号 | 简介                                                       | 来源   | 进度 |
-| ---- | ---------------------------------------------------------- | ------ | ---- |
-| 1    | 任务支持批注功能                                           | 问卷   | ✅    |
-| 2    | 任务必填信息，支持导入模板                                 | QQ群   | ✅    |
-| 3    | 任务收集中增加限制文件类型                                 | 问卷   | ✅    |
-| 4    | 文件自动重命名后，可以增加原始文件名项                     | 问卷   | ✅    |
-| 5    | 导出的提交名单，显示提交/未提交数据                        | 问卷   | ✅    |
-| 6    | 支持直接从任务卡片跳转到文件面板展示对应任务数据           | GitHub | ✅    |
-| 7    | 添加标题进一步说明近期提交情况数据                         | GitHub | ✅    |
-| 8    | 文件提交，限制单次最大同时上传文件数量                     | GitHub | ✅    |
-| 9    | 文件提交，限制文件大小                                     | GitHub | ✅    |
-| 10   | 人员提交情况面板展示序号                                   | QQ群   | ✅    |
-| 11   | 任务信息维护面板，显示帮助提示信息（带图）                 | -      | ✅    |
-| 12   | 限制人员后，提交情况加个附件数量                           | QQ群   | ✅    |
-| 13   | 优化文件提交的导出记录展示（分开展示提交信息）             | QQ群   | ✅    |
-| 14   | 文件列表的图片缩略图+预览                                  | QQ群   | ✅    |
-| 15   | 表单支持单选多选                                           | QQ群   | ✅    |
-| 16   | 限制人员名单，支持导入模板                                 | QQ群   | ✅    |
-| 17   | 自动重命名，支持固定内容（表单支持固定内容）               | QQ群   | ✅    |
-| 18   | 表单支持下拉选择                                           | QQ群   | ✅    |
-| 19   | 上传前，显示文件的MD5校验进度                              | GitHub | ✅    |
-| 20   | 提交面板的操作提示文案                                     | -      | ✅    |
-| 21   | 撤回后建议文件列表添加提示(文件名后面加个"已撤回"提示一下) | GitHub | ✅    |
-| 22   | 提交信息面板展示人员名字                                   | QQ群   | ✅    |
-| 23   | 管理端支持直接修改账号的密码和绑定手机号                   | QQ群   | ✅    |
-| 24   | 文件列表支持文件名排序                                     | QQ群   | ✅    |
-| 26   | 应用管理刷新会404                                          | QQ群   | ✅    |
-| 26   | 简化部署步骤，部分配置移入单独控制面板                     | -      | ✅    |
-| 27   | 文档完善，添加FAQ，部署自查步骤                            | -      | ✅    |
-| 28   | 支持直接修改已提交文件的文件名                             | QQ群   | ✅    |
-| 29   | 文件面板XXG空间文案介绍更新                                | -      | ✅    |
-| 30   | 限制名单后，弹窗确认改为直接输入框输入                     | QQ群   | ✅    |
-| 31   | 添加可视化面板，配置数据库，七牛云等相关配置               | -      | ✅    |
-| 32   | 批量压缩完成后删除OSS上的中间产物                          | QQ群   | ✅    |
-| 33   | 支持单独添加限制人员                                       | QQ群   | ✅    |
-:::
-
-:::details UI/UE🪞
-
-| 序号 | 简介                                             | 来源   | 进度 |
-| ---- | ------------------------------------------------ | ------ | ---- |
-| 1    | 创建任务时，“确定”按钮可以变成绿色等明显的颜色   | 问卷   | ✅    |
-| 2    | 下拉列表限制宽度，自动截断长文案                 | -      | ✅    |
-| 3    | 显示登录的用户名                                 | -      | ✅    |
-| 4    | 任务卡片自动截断长title，居中对齐                | GitHub | ✅    |
-| 5    | 查询按钮和左边的按钮一致                         | GitHub | ✅    |
-| 6    | 退出按钮样式优化                                 | GitHub | ✅    |
-| 7    | 必填信息展示对齐                                 | GitHub | ✅    |
-| 8    | 开始上传改为提交文件                             | GitHub | ✅    |
-| 9    | 登录面板UI未对齐                                 | GitHub | ✅    |
-| 10   | “关闭” 改为 “取消”                               | GitHub | ✅    |
-| 11   | 表单页UI未对齐                                   | GitHub | ✅    |
-| 12   | 限制提示消息展示条数                             | GitHub | ✅    |
-| 13   | 上传文件列表如果能突出一下就好了, 加个边框什么的 | GitHub | ✅    |
-| 14   | 删除文件的ICON太小了                             | QQ群   | ✅    |
-| 15   | 更新提交任务页的"下载模板"文案和提示信息         | QQ群   | ✅    |
-| 16   | 调大提交按钮                                     | QQ群   | ✅    |
-| 17   | 首页大拇指错位                                   | -      | ✅    |
-:::

package/docs/plan/wish.md

@@ -1,29 +0,0 @@
-# 需求墙
-> 问题反馈交流新“地盘” => [EasyPicker](https://support.qq.com/product/444158)
-
-:::danger 优先处理Bug（应用缺陷）!!!
-如有使用上的问题，也在此处反馈
-:::
-
-:::tip 展示一些用户侧反馈的建议与使用问题
-通过投票决定下一个新功能是什么
-
-票数越多优先级越高
-
-当然你也可以提出你的建议，让大家来投票
-:::
-
-:::warning But，优先支持打赏朋友提的功能
-💐 💐 感谢各位[打赏](./../praise/index.md)的朋友，💐 💐
-:::
-
-<wish-btn />
-
-<wish-panel />
-
-## 其它方式
-
-| 加群反馈                                                                                                            | [问卷反馈](https://www.wenjuan.com/s/UZBZJvA040/#《轻取（EasyPicker）用户意见收集》，快来参与吧。【问卷网提供支持】) |
-| ------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
-| <img style="width: 240px" src="https://img.cdn.sugarat.top/mdImg/MTY0OTkwMDk2MzQ3OQ==649900963479" alt="QQ群"/> | <img style="width: 240px" src="https://img.cdn.sugarat.top/mdImg/MTY1NTYwNjA0OTc0OA==655606049748" alt="问卷"/>  |
-

package/docs/praise/index.md

@@ -1,45 +0,0 @@
-# 请作者喝茶
-
-:::tip 💰
-`EasyPicker(轻取)` 是[完全开源](https://github.com/ATQQ/easypicker2-client)&免费的Web应用！！！
-
-`EasyPicker(轻取)` 是[完全开源](https://github.com/ATQQ/easypicker2-client)&免费的Web应用！！！
-
-`EasyPicker(轻取)` 是[完全开源](https://github.com/ATQQ/easypicker2-client)&免费的Web应用！！！
-:::
-
-缘于兴趣和机缘巧合
-
-和大家一样，在学校被`收图`，`收文件`反复折磨，当时市面上也没有比较合适好用的成品
-
-这给笔者开发 `轻取` 带来了`契机`
-
-目前注册用户已经有了一定规模
-
-过程中收到许多网友的称赞与反馈，应用能被大家认可也是非常开心😄
-
-如果你觉得应用不错，可以请作者喝茶🍵
-
-:::warning 应用的开销
-* 存储 `0.15` 元/GB/月
-* 下载 `0.29` 元/GB
-:::
-
-## 打赏码
-<Praise />
-
-## 打赏记录
-| 昵称      | 日期       | 来源 | 金额  | 备注               |
-| --------- | ---------- | ---- | ----- | ------------------ |
-| Sak***iro | 2022-06-18 | 微信 | 6.66  | 加油               |
-| 欲****熊  | 2022-07-12 | 微信 | 6.66  | 我是大废物         |
-| 周****琪  | 2022-07-31 | QQ   | 35.00 | 请你喝奶茶         |
-| *了       | 2022-08-31 | 微信 | 6.66  | 加油大哥           |
-| 欲****熊  | 2022-09-12 | 微信 | 20.00 | 手动狗头 发电      |
-| 匿名˝     | 2022-09-27 | 微信 | 20.00 | 辛苦了，喝杯奶茶   |
-| 太***谦   | 2022-10-23 | 微信 | 6.66  | 加油💪🏻              |
-| *凌       | 2023-01-22 | 微信 | 6.66  | 非常好的程序，加油 |
-| *L        | 2023-01-31 | 微信 | 6.66  | -                  |
-
-
-再次感谢以上网友 💐💐

package/docs/public/robots.txt

@@ -1,2 +0,0 @@
-User-agent: *
-Allow: /

package/docs/src/apis/ajax.ts

@@ -1,66 +0,0 @@
-import axios from 'axios'
-import { ElMessage } from 'element-plus'
-
-const instance = axios.create({
-  baseURL: import.meta.env.VITE_APP_AXIOS_BASE_URL,
-})
-
-/**
- * 请求拦截
- */
-instance.interceptors.request.use((config) => {
-  const { method, params } = config
-  // 附带鉴权的token
-  const headers: any = {
-
-  }
-  // 不缓存get请求
-  if (method === 'get') {
-    headers['Cache-Control'] = 'no-cache'
-  }
-  // delete请求参数放入body中
-  if (method === 'delete') {
-    headers['Content-type'] = 'application/json;'
-    Object.assign(config, {
-      data: params,
-      params: {},
-    })
-  }
-
-  return ({
-    ...config,
-    headers,
-  })
-})
-
-// 跳转首页防抖
-let redirectHome = true
-/**
- * 响应拦截
- */
-instance.interceptors.response.use((v) => {
-  if (v.status === 200) {
-    if (v.data.code === 0) {
-      return v.data
-    }
-    if (v.data?.code === 3004) {
-      if (redirectHome) {
-        redirectHome = false
-        ElMessage.error('登录过期,跳转首页')
-        setTimeout(() => {
-          redirectHome = true
-        }, 1000)
-      }
-    }
-    if (v?.data?.code === 500) {
-      ElMessage.error(v?.data?.msg)
-    }
-    return Promise.reject(v.data)
-  }
-  ElMessage.error(v.statusText)
-  return Promise.reject(v)
-}, (err) => {
-  ElMessage.error(`网络错误：${err}`)
-  return Promise.reject(err)
-})
-export default instance

package/docs/src/apis/index.ts

@@ -1 +0,0 @@
-export { default as WishApi } from './modules/wish'

package/docs/src/apis/modules/wish.ts

@@ -1,20 +0,0 @@
-import ajax from '../ajax'
-
-function addWish(wish:Partial<WishApiTypes.Wish>):WishApiTypes.addWish {
-  return ajax.post(
-    '/wish/add', wish,
-  )
-}
-
-function getDocsWish():WishApiTypes.allDocsWishData {
-  return ajax.get('wish/all/docs')
-}
-
-function praiseWish(id:string) {
-  return ajax.post(`wish/praise/${id}`)
-}
-export default {
-  addWish,
-  getDocsWish,
-  praiseWish,
-}

package/docs/src/components/Avatar.vue

@@ -1,60 +0,0 @@
-<template>
-    <div class="avatar">
-        <img class="logo" loading="lazy" src="https://sugarat.top/icon.png" />
-        <div class="name">
-            <a href="https://sugarat.top" target="_blank">粥里有勺糖</a>
-        </div>
-        <div class="description">
-            前端切图仔
-            <br />热爱开源，乐于分享
-        </div>
-        <div class="links">
-            <a
-                class="github-icon"
-                href="https://github.com/ATQQ"
-                target="_blank"
-                rel="noopener noreferrer"
-            />
-        </div>
-    </div>
-</template>
-<style scoped>
-.avatar {
-    margin-top: 20px;
-    text-align: center;
-}
-.logo {
-    width: 100px;
-    border-radius: 50%;
-    margin: 0 auto;
-}
-
-.name {
-    font-size: 18px;
-    font-weight: bold;
-    margin-top: 10px;
-    text-align: center;
-}
-.description {
-    margin-top: 10px;
-    text-align: center;
-    line-height: 26px;
-    opacity: 0.6;
-}
-.github-icon {
-    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1.2em' height='1.2em' preserveAspectRatio='xMidYMid meet' viewBox='0 0 32 32'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M16 2a14 14 0 0 0-4.43 27.28c.7.13 1-.3 1-.67v-2.38c-3.89.84-4.71-1.88-4.71-1.88a3.71 3.71 0 0 0-1.62-2.05c-1.27-.86.1-.85.1-.85a2.94 2.94 0 0 1 2.14 1.45a3 3 0 0 0 4.08 1.16a2.93 2.93 0 0 1 .88-1.87c-3.1-.36-6.37-1.56-6.37-6.92a5.4 5.4 0 0 1 1.44-3.76a5 5 0 0 1 .14-3.7s1.17-.38 3.85 1.43a13.3 13.3 0 0 1 7 0c2.67-1.81 3.84-1.43 3.84-1.43a5 5 0 0 1 .14 3.7a5.4 5.4 0 0 1 1.44 3.76c0 5.38-3.27 6.56-6.39 6.91a3.33 3.33 0 0 1 .95 2.59v3.84c0 .46.25.81 1 .67A14 14 0 0 0 16 2Z'/%3E%3C/svg%3E");
-    width: 30px;
-    height: 30px;
-    background-repeat: no-repeat;
-    background-size: 100%;
-}
-.links {
-    margin-top: 10px;
-    display: flex;
-    justify-content: center;
-}
-.links a {
-    display: block;
-    opacity: 0.5;
-}
-</style>

package/docs/src/components/Home.vue

@@ -1,85 +0,0 @@
-<template>
-  <div class="home">
-    <ul class="card-grid">
-      <li>
-        <h2 class="h2">微信赞赏</h2>
-        <Picture
-          style="width: 200px"
-          src="https://img.cdn.sugarat.top/mdImg/MTY0Nzc2MDE3MzM1NA==647760173354"
-        />
-
-        <div class="description">
-          如果你觉得项目不错
-          <br />
-          <span>
-            可以
-            <a href="/praise/index" style="color: #3f9eff"
-              >请作者喝 <strong>🍵</strong></a
-            >
-          </span>
-        </div>
-      </li>
-      <li>
-        <h2 class="h2">Developer</h2>
-        <div class="user-list">
-          <Avatar />
-        </div>
-      </li>
-      <li>
-        <h2 class="h2">
-          <a href="https://support.qq.com/product/444158" target="_blank"
-            >反馈交流</a
-          >群
-        </h2>
-
-        <Picture
-          style="width: 200px; margin: 10px"
-          src="https://img.cdn.sugarat.top/mdImg/MTY0Nzc1MjI3MzUwMw==647752273503"
-        />
-      </li>
-    </ul>
-  </div>
-</template>
-<script setup>
-import Avatar from './Avatar.vue'
-import Picture from './Picture.vue'
-</script>
-
-<style scoped lang="scss">
-.home {
-  margin: 20px 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.h2 {
-  opacity: 0.5;
-  text-align: center;
-}
-
-.description {
-  margin-top: 10px;
-  text-align: center;
-  line-height: 26px;
-}
-
-.action-link + .action-link {
-  margin-left: 20px;
-}
-
-.version {
-  margin: 0rem 0 2.5rem 0;
-  opacity: 0.5;
-  display: flex;
-  align-items: center;
-}
-
-.card-grid {
-  display: flex;
-  max-width: 1168px;
-  width: 100%;
-  justify-content: space-around;
-  flex-wrap: wrap;
-}
-</style>

package/docs/src/components/Picture.vue

@@ -1,13 +0,0 @@
-<template>
-  <el-image :src="src" :preview-src-list="[src]" hide-on-click-modal/>
-</template>
-<script setup lang="ts">
-import { ElImage } from 'element-plus'
-
-defineProps({
-  src: {
-    type: String,
-    default: '',
-  },
-})
-</script>

package/docs/src/components/Praise.vue

@@ -1,52 +0,0 @@
-<template>
-  <span class="praise">
-    <table>
-      <thead>
-        <tr>
-          <th v-for="(v, idx) in praiseImg" :key="idx">{{ v.title }}</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td v-for="(v, idx) in praiseImg" :key="idx">
-            <el-image hide-on-click-modal preview-teleported style="width: 200px; height: 200px" :src="v.url"
-              :preview-src-list="praiseImg.map(v => v.url)" :initial-index="idx" fit="cover" />
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </span>
-</template>
-<script setup lang="ts">
-import {
-  ElImage,
-} from 'element-plus'
-import {
-  reactive,
-} from 'vue'
-
-const praiseImg = reactive([
-  {
-    url: 'https://img.cdn.sugarat.top/mdImg/MTY1MTU0NzQ0MjMzNA==651547442334',
-    title: '微信',
-  },
-  {
-    url: 'https://img.cdn.sugarat.top/mdImg/MTY0Nzc1NTYyOTE5Mw==647755629193',
-    title: '微信赞赏',
-  },
-  {
-    url: 'https://img.cdn.sugarat.top/mdImg/MTY1MTU0NzQyOTg0OA==651547429848',
-    title: '支付宝',
-  },
-])
-
-</script>
-<style scoped>
-.praise {
-  cursor: pointer;
-}
-
-.praise-line {
-  margin-bottom: 10px;
-}
-</style>

package/docs/src/components/WishBtn.vue

@@ -1,98 +0,0 @@
-<template>
-  <div class="wish-btn">
-    <div class="btn-list">
-      <el-button
-        v-if="!dialogVisible"
-        @click="handleOpenFeature"
-        style="margin: 0 auto"
-        size="large"
-        type="success"
-        >提建议 & 给反馈</el-button
-      >
-      <el-button
-        v-else
-        @click="dialogVisible = false"
-        style="margin: 0 auto"
-        size="large"
-        type="warning"
-        >取消
-      </el-button>
-    </div>
-    <el-form :model="formData" v-show="dialogVisible" style="margin-top: 10px">
-      <el-form-item label="建议&问题" :label-width="formLabelWidth">
-        <el-input
-          placeholder="一句简单明了的话概括一下"
-          v-model="formData.title"
-        ></el-input>
-      </el-form-item>
-      <el-form-item label="详细描述" :label-width="formLabelWidth">
-        <el-input
-          placeholder="用朴素的话语进一步描述你的建议"
-          type="textarea"
-          v-model="formData.des"
-        ></el-input>
-      </el-form-item>
-      <el-form-item label="联系方式" :label-width="formLabelWidth">
-        <el-input
-          placeholder="邮箱，QQ，微信等任意方式均可"
-          v-model="formData.contact"
-        ></el-input>
-      </el-form-item>
-    </el-form>
-    <div class="btn-list" v-show="dialogVisible">
-      <el-button type="success" @click="handleAddFeature">提交</el-button>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ElButton, ElMessage, ElFormItem, ElInput, ElForm } from 'element-plus'
-import { ref, reactive } from 'vue'
-import { WishApi } from '../apis'
-
-const formLabelWidth = '80px'
-const dialogVisible = ref(false)
-const formData = reactive({
-  title: '',
-  des: '',
-  contact: ''
-})
-const handleOpenFeature = () => {
-  dialogVisible.value = true
-}
-
-const vaildFormData = () => {
-  if (formData.title.length === 0) {
-    ElMessage.error('建议标题不能为空')
-    return false
-  }
-  if (formData.des.length === 0) {
-    ElMessage.error('建议详细描述，不能为空')
-    return false
-  }
-  return true
-}
-const handleAddFeature = () => {
-  // 信息校验
-  if (!vaildFormData()) {
-    return
-  }
-  dialogVisible.value = false
-  // 提交信息
-  WishApi.addWish(formData).then(() => {
-    ElMessage.success('提交成功，感谢你的反馈')
-  })
-  // 初始化 表单内容
-  formData.title = ''
-  formData.des = ''
-  formData.contact = ''
-}
-</script>
-
-<style lang="scss" scoped>
-.btn-list {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-</style>