From 94d87433119b7d7dfd669e5c17e9c63369922423 Mon Sep 17 00:00:00 2001
From: SunWuyuan <1847261658@qq.com>
Date: Wed, 2 Oct 2024 16:07:13 +0800
Subject: [PATCH] 1

---
 src/components/AddTolist.vue             |  98 +++++++++++++++++++
 src/components/AppHeader.vue             |   3 +-
 src/components/EditProjectListConfig.vue | 116 +++++++++++++++++++++++
 src/components/NewProjectDialog.vue      |   8 +-
 src/components/NewProjectList.vue        |  75 +++++++++++++++
 src/components/ProjectsCards.vue         |   4 +-
 src/pages/account/index.vue              |  61 +++++++-----
 src/pages/projectlist/[id].vue           | 112 ++++++++++++++++++++++
 src/pages/projectlist/index.vue          |  67 +++++++++++++
 src/pages/projects/[id]/index.vue        |   4 +-
 src/pages/projects/[id]/push.vue         |   5 +-
 11 files changed, 518 insertions(+), 35 deletions(-)
 create mode 100644 src/components/AddTolist.vue
 create mode 100644 src/components/EditProjectListConfig.vue
 create mode 100644 src/components/NewProjectList.vue
 create mode 100644 src/pages/projectlist/[id].vue
 create mode 100644 src/pages/projectlist/index.vue

diff --git a/src/components/AddTolist.vue b/src/components/AddTolist.vue
new file mode 100644
index 0000000..c4d8df9
--- /dev/null
+++ b/src/components/AddTolist.vue
@@ -0,0 +1,98 @@
+<template>
+    <v-list>
+      <div  v-for="item in lists" :key="item.id">
+      <v-list-item :append-icon="item.include == true ? 'mdi-minus-circle' : 'mdi-plus-circle'"
+        :active="item.include == true" color="primary"
+        @click="item.include == true ? ProjectlistDelete(item.id) : ProjectlistAdd(item.id)">
+
+        <v-list-item-title> {{ item.title }}</v-list-item-title>
+        <v-list-item-subtitle>{{ item.description }}</v-list-item-subtitle>
+      </v-list-item></div>
+      <v-list-item @click="NewProjectListDialog = true">新建列表</v-list-item>
+    </v-list>
+
+
+
+  <v-dialog v-model="NewProjectListDialog">
+    <NewProjectList :listid="editlistid" :close="() => NewProjectListDialog = false" :callback="getProjectList">
+    </NewProjectList>
+  </v-dialog>
+
+
+</template>
+<script>
+import NewProjectList from '@/components/NewProjectList.vue'
+import { localuser } from "@/stores/user";
+import request from '../axios/axios'
+export default {
+  components: { NewProjectList },
+
+  name: "projectlist",
+  data() {
+    return {
+      localuser: localuser,
+      userinfo: localuser.user,
+      NewProjectListDialog: false,
+      lists: [
+
+      ],
+    };
+  },
+  methods: {
+    async getProjectList() {
+      this.lists = (await request({
+        url: '/projectlist/check?projectid=' + this.$route.params.id,
+        data: {
+          userid: this.userinfo.id,
+          projectid: this.$route.params.id,
+        },
+        method: 'get',
+      })).data
+    },
+    async ProjectlistAdd(id) {
+      await request({
+        url: '/projectlist/add',
+        data: {
+          userid: this.userinfo.id,
+          projectid: this.$route.params.id,
+          listid: id,
+        },
+        method: 'post',
+      }).then((res) => {
+        this.$toast.add({
+          severity: "info",
+          summary: "info",
+          detail: res.message,
+          life: 3000,
+        });
+        this.getProjectList()
+
+      })
+    },
+    async ProjectlistDelete(id) {
+      await request({
+        url: '/projectlist/delete',
+        data: {
+          userid: this.userinfo.id,
+          projectid: this.$route.params.id,
+          listid: id,
+        },
+        method: 'post',
+      }).then((res) => {
+        this.$toast.add({
+          severity: "info",
+          summary: "info",
+          detail: res.message,
+          life: 3000,
+        });
+        this.getProjectList()
+
+      })
+
+    }
+  },
+  mounted() {
+    this.getProjectList();
+  },
+};
+</script>
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 1ea3404..9390f45 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -56,7 +56,8 @@
         <v-list-item rounded="xl" prepend-icon="mdi-cog" title="账户设置" value="account" to="/account"></v-list-item>
         <v-list-item rounded="xl" prepend-icon="mdi-xml" title="我的项目" value="myprojects"
           to="/projects/my"></v-list-item>
-
+          <v-list-item rounded="xl" prepend-icon="mdi-xml" title="我的列表" value="myprojectlist"
+          to="/projectlist"></v-list-item>
         <v-list-item rounded="xl" prepend-icon="mdi-export" :title="logoutbutton" value="logout"
           @click="trylogout"></v-list-item>
 
diff --git a/src/components/EditProjectListConfig.vue b/src/components/EditProjectListConfig.vue
new file mode 100644
index 0000000..48ca409
--- /dev/null
+++ b/src/components/EditProjectListConfig.vue
@@ -0,0 +1,116 @@
+<template>
+  <v-card :title="`${listinfo.title}(#${listinfo.id})`">
+    <v-card-text>
+      <v-text-field v-model="newlistinfo.title" label="名称" required></v-text-field>
+      <v-text-field v-model="newlistinfo.description" label="简介" required></v-text-field>
+
+      <v-select v-model="newlistinfo.state" :items="liststates" item-title="state" item-value="abbr"
+        label="项目状态"></v-select>
+    </v-card-text>
+    <v-card-actions>
+      <v-btn text="删除" variant="plain" @click="deleteProjectList(listid);close()" color="red"></v-btn>
+
+      <v-spacer></v-spacer>
+      <v-btn text="回退" variant="plain" @click="newlistinfo = Object.assign({}, listinfo)"></v-btn>
+
+      <v-btn text="关闭" variant="plain" @click="close()"></v-btn>
+
+      <v-btn color="primary" text="保存" variant="tonal" @click="updateProjectList(listid)"></v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script>
+import request from "../axios/axios";
+export default {
+  data() {
+    return {
+      liststates: [
+        { state: "私密", abbr: "private" },
+        { state: "公开", abbr: "public" },
+      ],
+      created: false,
+      newid: 0,
+      isVisible: false,
+      listinfo: {},
+      newlistinfo: {},
+    };
+  },
+  props: {
+    listid: {
+      type: String,
+      required: true, // 可以根据需要设置为 true
+    },
+    callback: {
+      type: Function,
+      required: false, // 可以根据需要设置为 true
+    }, close: {
+      type: Function,
+      required: false, // 可以根据需要设置为 true
+    },
+  },
+  methods: {
+    show() {
+      this.created = false;
+      this.newid = 0;
+      this.isVisible = true;
+    },
+    async getProjectList(listid) {
+      await request.get("/projectlist/" + listid).then((res) => {
+        console.log(res);
+        this.$toast.add({
+          severity: "info",
+          summary: "info",
+          detail: res,
+          life: 3000,
+        });
+        if (res.status == "1") {
+          //this.created = true
+          this.listinfo = Object.assign({}, res.data);
+
+          this.newlistinfo = Object.assign({}, res.data);
+        }
+      });
+      this.callback();
+    },
+    async updateProjectList(listid) {
+      await request
+        .put("/projectlist/" + listid, this.newlistinfo)
+        .then((res) => {
+          console.log(res);
+          this.$toast.add({
+            severity: "info",
+            summary: "info",
+            detail: res,
+            life: 3000,
+          });
+          if (res.status == "1") {
+            //this.created = true
+            this.listinfo = Object.assign({}, res.data);
+
+            this.newlistinfo = Object.assign({}, res.data);
+          }
+        });
+      this.callback();
+    },
+    async deleteProjectList(listid) {
+      await request.delete("/projectlist/" + listid).then((res) => {
+        console.log(res);
+        this.$toast.add({
+          severity: "info",
+          summary: "info",
+          detail: res,
+          life: 3000,
+        });
+
+      });
+      this.callback();
+    },
+  },
+  mounted() {
+    this.getProjectList(this.listid);
+  },
+};
+</script>
+
+<style scoped></style>
diff --git a/src/components/NewProjectDialog.vue b/src/components/NewProjectDialog.vue
index 27a85a7..07ce673 100644
--- a/src/components/NewProjectDialog.vue
+++ b/src/components/NewProjectDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-dialog v-model="this.showdialog" persistent max-width="500px">
+  <v-dialog v-model="this.isVisible" persistent max-width="500px">
 
 
     <v-card prepend-icon="mdi-xml" title="新建作品">
@@ -26,7 +26,7 @@
 
         <v-spacer></v-spacer>
 
-        <v-btn text="取消" variant="plain" @click="showdialog = false"></v-btn>
+        <v-btn text="取消" variant="plain" @click="isVisible = false"></v-btn>
 
         <v-btn color="primary" text="创建" variant="tonal" @click="newProject()" :disabled="created"></v-btn>
       </v-card-actions>
@@ -47,7 +47,7 @@ export default {
       },
       created: false,
       newid: 0,
-      showdialog: false,
+      isVisible: false,
       openEdit
     };
   },
@@ -59,7 +59,7 @@ export default {
       },
         this.created = false
       this.newid = 0
-      this.showdialog = true
+      this.isVisible = true
     },
     async newProject() {
       await request.post('/project/', this.projectinfo).then((res) => {
diff --git a/src/components/NewProjectList.vue b/src/components/NewProjectList.vue
new file mode 100644
index 0000000..b14889b
--- /dev/null
+++ b/src/components/NewProjectList.vue
@@ -0,0 +1,75 @@
+<template>
+
+
+    <v-card prepend-icon="mdi-xml" title="新建列表">
+      <v-card-text>
+        <v-row dense>
+          <v-col cols="12" md="12" sm="12">
+            <v-text-field label="标题" required hint="将便于查找" v-model="projectinfo.title" disabled></v-text-field>
+          </v-col>
+        </v-row>
+
+      </v-card-text>
+      <v-divider></v-divider>
+      <v-card-actions>
+
+        <v-spacer></v-spacer>
+
+        <v-btn text="关闭" variant="plain" @click="close()"></v-btn>
+
+        <v-btn color="primary" text="创建" variant="tonal" @click="newProjectList();close()" :disabled="created"></v-btn>
+      </v-card-actions>
+    </v-card>
+</template>
+
+
+<script>
+import openEdit from "../stores/openEdit";
+import request from "../axios/axios";
+export default {
+  data() {
+    return {
+      projectinfo: {
+        title: '新建项目列表',
+      },
+      created: false,
+      newid: 0,
+      isVisible: false,
+      openEdit
+    };
+  },
+  props: {
+    callback: {
+      type: Function,
+      required: false, // 可以根据需要设置为 true
+    }, close: {
+      type: Function,
+      required: false, // 可以根据需要设置为 true
+    },
+  },
+  methods: {
+    show() {
+      this.projectinfo = {
+        title: '新建项目列表',
+      },
+        this.created = false
+      this.newid = 0
+      this.isVisible = true
+    },
+    async newProjectList() {
+      await request.post('/projectlist/', this.projectinfo).then((res) => {
+        console.log(res)
+        this.$toast.add({ severity: 'info', summary: 'info', detail: res, life: 3000 });
+        if (res.status == '1') {
+          //this.created = true
+          this.newid = res.id
+
+        }
+      })
+      this.callback()
+    }
+  },
+};
+</script>
+
+<style scoped></style>
diff --git a/src/components/ProjectsCards.vue b/src/components/ProjectsCards.vue
index 8b199c6..d916b94 100644
--- a/src/components/ProjectsCards.vue
+++ b/src/components/ProjectsCards.vue
@@ -1,7 +1,7 @@
 <template>
           <v-row>
-        <v-col cols="12" xs="12" sm="6" md="4" lg="3" xl="2" xxl="2" v-for="info in projects.data" :key="info">
-        <ProjectCard :info="info" :user="projects.user.find((u) => u.id === info.authorid)" :actions="actions"></ProjectCard>
+        <v-col cols="12" xs="12" sm="6" md="4" lg="3" xl="2" xxl="2" v-for="info in projects.projects" :key="info">
+        <ProjectCard :info="info" :user="projects.users.find((u) => u.id === info.authorid)" :actions="actions"></ProjectCard>
         </v-col></v-row>
   </template>
 
diff --git a/src/pages/account/index.vue b/src/pages/account/index.vue
index 5e3e3b8..d00307d 100644
--- a/src/pages/account/index.vue
+++ b/src/pages/account/index.vue
@@ -57,14 +57,14 @@
                     <v-select v-model="select" :items="items" item-title="state" item-value="abbr" label="性别"
                       persistent-hint return-object></v-select></v-col>
 
-                    <v-col cols="12">
-                      <div id="recaptcha-div1"></div>
-                      <v-btn @click="initRecaptcha('recaptcha-div1','popup');" variant="text">加载验证码</v-btn>
-
-                      <v-btn @click="resetCaptcha()" variant="text">刷新</v-btn>
-                    </v-col><v-col cols="12">
-                      <v-btn @click="submit" :disabled="!valid"> 提交 </v-btn>
-                    </v-col>
+                  <v-col cols="12">
+                    <div id="recaptcha-div1"></div>
+                    <v-btn @click="initRecaptcha('recaptcha-div1', 'popup');" variant="text">加载验证码</v-btn>
+
+                    <v-btn @click="resetCaptcha()" variant="text">刷新</v-btn>
+                  </v-col><v-col cols="12">
+                    <v-btn @click="submit" :disabled="!valid"> 提交 </v-btn>
+                  </v-col>
                 </v-row>
               </v-container>
             </v-form>
@@ -79,13 +79,13 @@
                   </v-col>
 
                   <v-col cols="12">
-                      <div id="recaptcha-div2"></div>
-                      <v-btn @click="initRecaptcha('recaptcha-div2','popup');" variant="text">加载验证码</v-btn>
+                    <div id="recaptcha-div2"></div>
+                    <v-btn @click="initRecaptcha('recaptcha-div2', 'popup');" variant="text">加载验证码</v-btn>
 
-                      <v-btn @click="resetCaptcha()" variant="text">刷新</v-btn>
-                    </v-col><v-col cols="12">
-                      <v-btn @click="changeusername" :disabled="!usernamevalid"> 提交 </v-btn>
-                    </v-col>
+                    <v-btn @click="resetCaptcha()" variant="text">刷新</v-btn>
+                  </v-col><v-col cols="12">
+                    <v-btn @click="changeusername" :disabled="!usernamevalid"> 提交 </v-btn>
+                  </v-col>
                 </v-row>
               </v-container>
             </v-form></v-tabs-window-item>
@@ -100,14 +100,14 @@
                     <v-text-field v-model="newpassword" :rules="passwordRules" label="新密码" required></v-text-field>
                   </v-col>
                   <v-col cols="12">
-                      <div id="recaptcha-div3"></div>
-                      <v-btn @click="initRecaptcha('recaptcha-div3','popup');" variant="text">加载验证码</v-btn>
+                    <div id="recaptcha-div3"></div>
+                    <v-btn @click="initRecaptcha('recaptcha-div3', 'popup');" variant="text">加载验证码</v-btn>
 
-                      <v-btn @click="resetCaptcha()" variant="text">刷新</v-btn>
-                    </v-col>    <v-col cols="12">
-                      <v-btn @click="changepassword" :disabled="!passwordvalid"> 提交 </v-btn>
+                    <v-btn @click="resetCaptcha()" variant="text">刷新</v-btn>
+                  </v-col> <v-col cols="12">
+                    <v-btn @click="changepassword" :disabled="!passwordvalid"> 提交 </v-btn>
 
-                    </v-col>
+                  </v-col>
                 </v-row>
               </v-container>
             </v-form></v-tabs-window-item>
@@ -209,13 +209,18 @@ export default {
         url: "/my/set/userinfo",
         method: "post",
         data: {
-          "captcha": getResponse(),
+          "captcha": getResponse()||'',
 
           display_name: this.UserInfo.display_name,
           aboutme: this.UserInfo.motto,
           sex: this.select.abbr,
         },
-      });
+      }).catch((error) => {
+        console.log(error);
+        this.$toast.add({ severity: 'error', summary: '错误', detail: error, life: 3000 });
+
+      })
+        ;
       console.log(response.status);
       this.$toast.add({ severity: 'info', summary: '修改个人信息', detail: response.status, life: 3000 });
 
@@ -229,10 +234,14 @@ export default {
         url: "/my/set/username",
         method: "post",
         data: {
-          "captcha": getResponse(),
+          "captcha": getResponse()||'',
 
           username: this.UserInfo.username,
         },
+      }).catch((error) => {
+        console.log(error);
+        this.$toast.add({ severity: 'error', summary: '错误', detail: error, life: 3000 });
+
       });
       this.$toast.add({ severity: 'info', summary: '修改用户名', detail: response.status, life: 3000 });
 
@@ -247,10 +256,14 @@ export default {
         url: "/my/set/pw",
         method: "post",
         data: {
-          "captcha": getResponse(),
+          "captcha": getResponse()||'',
 
           oldpw: this.oldpassword, newpw: this.newpassword
         },
+      }).catch((error) => {
+        console.log(error);
+        this.$toast.add({ severity: 'error', summary: '错误', detail: error, life: 3000 });
+
       });
       console.log(response.status);
       this.$toast.add({ severity: 'info', summary: '修改密码', detail: response.message, life: 3000 });
diff --git a/src/pages/projectlist/[id].vue b/src/pages/projectlist/[id].vue
new file mode 100644
index 0000000..7ea8c45
--- /dev/null
+++ b/src/pages/projectlist/[id].vue
@@ -0,0 +1,112 @@
+<template>
+  <v-container>
+    <v-card class="mx-auto" :disabled="Loading" :loading="Loading">
+      <template v-slot:title>
+        <span class="font-weight-black">{{ projectlist.title }}</span>
+      </template>
+      <template v-slot:loader="{ isActive }">
+        <v-progress-linear :active="isActive" height="4" indeterminate></v-progress-linear>
+      </template>
+      <template v-slot:subtitle>
+        <v-chip>
+          <v-icon icon="mdi-account-circle" start></v-icon>
+
+          ID:{{ projectlist.id }}
+        </v-chip>
+        <v-chip>
+          <v-icon icon="mdi-account-circle" start></v-icon>
+
+          {{ projectlist.state }}
+        </v-chip>
+        <v-chip>
+          <v-icon icon="mdi-clock" start></v-icon>
+
+          {{ projectlist.createTime }}创建
+        </v-chip>
+      </template>
+
+      <v-card-text class="bg-surface-light pt-4">
+        {{ projectlist.description }}
+      </v-card-text> </v-card><v-container>
+      <ProjectsCards :projects="projectlist.data"></ProjectsCards>
+    </v-container>
+    <div id="waline"></div>
+  </v-container>
+</template>
+
+<script>
+import request from "../../axios/axios";
+import { init } from "@waline/client";
+import "@waline/client/style";
+import { localuser } from "@/stores/user";
+import ProjectsCards from "../../components/ProjectsCards.vue";
+
+export default {
+  components: { ProjectsCards },
+
+  data() {
+    return {
+      projectlist: {
+        status: "1",
+        message: "加载中",
+        data: {
+          id: 7,
+          authorid: 1,
+          title: "加载中",
+          description: "加载中",
+          state: "private",
+          list: "",
+          updateTime: null,
+          createTime: "2000-00-01T00:00:00.000Z",
+          data: {
+            projects: [],
+            users: [],
+          },
+        },
+      },
+      localuser: localuser,
+      Loading: true,
+    };
+  },
+
+  async created() {
+    init({
+      el: "#waline",
+      serverURL: "https://zerocat-waline.190823.xyz",
+      path: "projectlist-" + this.$route.params.id,
+      copyright: false,
+      reaction: true,
+      pageview: true,
+      locale: {
+        reactionTitle: "这个列表怎么样？",
+      },
+      emoji: [
+        "//unpkg.com/@waline/emojis@1.1.0/weibo",
+        "//unpkg.com/@waline/emojis@1.1.0/bilibili",
+      ],
+      dark:
+        window.matchMedia &&
+        window.matchMedia("(prefers-color-scheme: dark)").matches,
+    });
+  },
+  methods: {
+    async getprojectlist() {
+      this.projectlist = await request({
+        url: "/projectlist/" + this.$route.params.id,
+        method: "get",
+      });
+      if (this.projectlist.status == "1") {
+        this.projectlist = this.projectlist.data;
+      } else {
+        this.$router.push("/404");
+      }
+      console.log(this.projectlist);
+    },
+  },
+  mounted() {
+    this.Loading = true;
+    this.getprojectlist();
+    this.Loading = false;
+  },
+};
+</script>
diff --git a/src/pages/projectlist/index.vue b/src/pages/projectlist/index.vue
new file mode 100644
index 0000000..59eea71
--- /dev/null
+++ b/src/pages/projectlist/index.vue
@@ -0,0 +1,67 @@
+<template> <v-container>
+    <h1>列表</h1><v-btn @click="NewProjectListDialog = true">创建</v-btn>
+    <div v-for="item in lists" :key="item.id">
+      <v-card>
+        <v-card-item>
+          <v-card-title>{{ item.title }}<v-chip :color="item.state == 'private' ? 'primary' : 'green'">
+              {{ item.state == 'private' ? '私密' : '公开' }}
+            </v-chip></v-card-title>
+
+          <v-card-subtitle>{{ item.createTime + '创建，' + item.updateTime + '更新' }}</v-card-subtitle>
+        </v-card-item>
+
+        <v-card-text>
+          {{ item.description }} </v-card-text>
+        <v-card-actions><v-btn @click="editlistid = item.id; EditProjectListConfigDialog = true">编辑</v-btn><v-btn
+            :to="`/projectlist/+${item.id}`">打开</v-btn>
+        </v-card-actions>
+      </v-card>
+      <br />
+
+    </div>
+  </v-container>
+  <v-dialog v-model="EditProjectListConfigDialog">
+    <EditProjectListConfig :listid="editlistid" :close="() => EditProjectListConfigDialog = false"
+      :callback="getProjectList"></EditProjectListConfig>
+
+  </v-dialog> <v-dialog v-model="NewProjectListDialog">
+    <NewProjectList :listid="editlistid" :close="() => NewProjectListDialog = false" :callback="getProjectList">
+    </NewProjectList>
+
+  </v-dialog>
+
+</template>
+<script>
+import NewProjectList from '@/components/NewProjectList.vue'
+import EditProjectListConfig from '@/components/EditProjectListConfig.vue'
+import { localuser } from "@/stores/user";
+import request from '../../axios/axios'
+export default {
+  components: { NewProjectList, EditProjectListConfig },
+
+  name: "projectlist",
+  data() {
+    return {
+      localuser: localuser,
+      userinfo: localuser.user,
+      editlistid: 0,
+      EditProjectListConfigDialog: false,
+      NewProjectListDialog: false,
+      lists: [
+
+      ],
+    };
+  },
+  methods: {
+    async getProjectList() {
+      this.lists = (await request({
+        url: '/projectlist/user/' + this.userinfo.userid,
+        method: 'get',
+      })).data
+    },
+  },
+  mounted() {
+    this.getProjectList();
+  },
+};
+</script>
diff --git a/src/pages/projects/[id]/index.vue b/src/pages/projects/[id]/index.vue
index 99017a6..14d4923 100644
--- a/src/pages/projects/[id]/index.vue
+++ b/src/pages/projects/[id]/index.vue
@@ -58,7 +58,8 @@
           </div>
 
           <br />
-        </v-card>
+        </v-card> <br/>    <v-card hover><AddTolist></AddTolist></v-card>
+
       </v-col>
     </v-row>
 
@@ -74,6 +75,7 @@ import { init } from "@waline/client";
 import ProjectRunner from "../../../components/ProjectRunner.vue";
 import "@waline/client/style";
 import { localuser } from "@/stores/user";
+import AddTolist from "../../../components/AddTolist.vue";
 export default {
   components: { ProjectRunner },
   data() {
diff --git a/src/pages/projects/[id]/push.vue b/src/pages/projects/[id]/push.vue
index d80581b..373e34d 100644
--- a/src/pages/projects/[id]/push.vue
+++ b/src/pages/projects/[id]/push.vue
@@ -32,7 +32,7 @@
       </template>
 
     </v-card>
-    <br /><v-card>
+<!--<v-card>
       <template v-slot:title>
         您可以执行推送
       </template>
@@ -47,8 +47,7 @@
         <v-checkbox label="我已了解并确认" v-model="checkprotect"></v-checkbox>
 
       </v-card-actions>
-    </v-card><br />
-    <br /><br />
+    </v-card>-->
 
     <br />
     <v-btn class="text-none" color="primary" rounded="xl" text="Push" variant="flat" size="large"