card样式调整，添加表单组件

src/App.vue

@@ -34,7 +34,6 @@ export default defineComponent({
 }
 html, body {
   width: 100%;
-  height: 100%;
 }
 
 #app {

src/assets/icon/close.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614581728244" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3866" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M595.549 512.5l344.35-344.347c23.211-23.212 23.211-60.84 0-84.053-23.212-23.208-60.841-23.208-84.05 0L511.5 428.45 171.802 88.753c-22.932-22.935-60.116-22.935-83.048 0-22.935 22.933-22.935 60.117 0 83.05L428.45 511.5 84.101 855.849c-23.211 23.21-23.211 60.84 0 84.049 23.212 23.211 60.841 23.211 84.05 0l344.35-344.35 338.822 338.823c22.933 22.935 60.116 22.935 83.048 0 22.935-22.933 22.935-60.117 0-83.048L595.549 512.5z" p-id="3867" fill="#8a8a8a"></path></svg>

src/components/ProjectCard.vue

@@ -27,9 +27,15 @@ export default defineComponent({
 <style lang="scss" scoped>
 .project-card {
   display: inline-block;
-  border: 1px solid #ccc;
+  box-shadow: 0 0 1px #BDC3C7;
+  border-radius: 5px;
+  padding: 10px;
   height: 150px;
-  width: 20%;
+  width: 320px;
   margin: 10px auto;
+  transition: all .3s ease;
+}
+.project-card:hover {
+  box-shadow: 0 0 5px #BDC3C7;
 }
 </style>

src/components/RightForm.vue

@@ -0,0 +1,66 @@
+<template>
+  <transition name="translation">
+  <div class="right-bar-container" v-if="isFormShow">
+    <div class="form-util">
+      <div class="close" @click="isFormShow=false"></div>
+    </div>
+    <div>
+      <slot></slot>
+    </div>
+  </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: 'RightForm',
+  data() {
+    return {
+      isFormShow: true,
+    };
+  },
+  methods: {
+    showForm() {
+      this.isFormShow = true;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.right-bar-container{
+  position: fixed;
+  right: 0px;
+  top: 0px;
+  height: 100vh;
+  width: 800px;
+  box-shadow: 0 0 5px #BDC3C7;
+  background: #FFFFFF;
+}
+.translation-enter-active,.translation-leave-active {
+  transition: all 0.3s ease-out;
+}
+.translation-enter-from,
+.translation-leave-to {
+  transform: translateX(800px);
+}
+.form-util{
+  width: 80px;
+  margin-left: auto;
+  padding: 10px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+.form-util .close{
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  background-image: url("../assets/icon/close.svg");
+}
+
+</style>

src/views/Home.vue

@@ -2,6 +2,7 @@
   <div class="home">
     <div class="poster">
     </div>
+    <div style="font-weight: bolder;font-size: 32px;padding: 30px">Hello,username</div>
     <div class="project-list">
       <ProjectCard
         v-for="project in projectList"

src/views/Project/BugList.vue

@@ -1,13 +1,26 @@
 <template>
-  project-bug-list
+  <div class="container">
+    <button @click="showRightForm">from test</button>
+    <RightForm ref="rightForm">
+    </RightForm>
+  </div>
 </template>
 
 <script>
-export default {
+import RightForm from '../../components/RightForm.vue';
 
+export default {
+  components: { RightForm },
+  methods: {
+    showRightForm() {
+      console.log(this.$refs.rightForm);
+      this.$refs.rightForm.showForm();
+    },
+  },
 };
 </script>
 
-<style>
-
+<style scoped>
+.container{
+}
 </style>

src/views/ProjectContainer.vue

@@ -25,9 +25,9 @@ export default {
 .container{
   background-color: #FFFFFF;
   width: calc(100% - 42px);
-  margin-left: 42px;
   margin-top: 58px;
-  min-height: 900px;
+  margin-left: 42px;
+  min-height: 60vh;
 }
 
 </style>