From 285fe7140c640d001d4025c9af5d4bc80a9ed31d Mon Sep 17 00:00:00 2001
From: zhangdd <86431843@qq.com>
Date: Sun, 20 Mar 2022 09:40:06 +0800
Subject: [PATCH] refactor:modify generate-code's style

Signed-off-by: zhangdd <86431843@qq.com>
---
 .../src/components/BackendStarter.vue         | 89 +++++++++++++------
 1 file changed, 62 insertions(+), 27 deletions(-)

diff --git a/initializer-ui/src/components/BackendStarter.vue b/initializer-ui/src/components/BackendStarter.vue
index 4df06e2..45991a4 100644
--- a/initializer-ui/src/components/BackendStarter.vue
+++ b/initializer-ui/src/components/BackendStarter.vue
@@ -1,32 +1,35 @@
 <template>
   <div class="generate-form">
 
-    <div class="generate-form-div generate-form-label generate-form-input">
-      <label for="input-packageName">GitlabUrl</label>
-      <input id="input-gitlabUrl" v-model="generateForm.gitlabUrl" type="text">
+    <div class="generate-form-div ">
+      <label for="input-packageName" class="generate-form-label">GitlabUrl</label>
+      <input id="input-gitlabUrl" class="generate-form-input" v-model="generateForm.gitlabUrl"
+             type="text">
     </div>
 
-    <div class="generate-form-div generate-form-label generate-form-input">
-      <label for="input-group">Group</label>
-      <input type="text" id="input-group" v-model="generateForm.group">
+    <div class="generate-form-div ">
+      <label for="input-group" class="generate-form-label">Group</label>
+      <input type="text" id="input-group" class="generate-form-input" v-model="generateForm.group">
     </div>
 
-    <div class="generate-form-div generate-form-label generate-form-input">
-      <label for="input-artifact">Artifact</label>
-      <input type="text" id="input-artifact" v-model="generateForm.artifact">
+    <div class="generate-form-div ">
+      <label for="input-artifact" class="generate-form-label">Artifact</label>
+      <input type="text" id="input-artifact" class="generate-form-input" v-model="generateForm.artifact">
     </div>
 
-    <div class="generate-form-div generate-form-label generate-form-input">
-      <label for="input-projectName">Project Name</label>
-      <input id="input-projectName" v-model="generateForm.projectName" type="text">
+    <div class="generate-form-div ">
+      <label for="input-projectName" class="generate-form-label">Project Name</label>
+      <input id="input-projectName" class="generate-form-input" v-model="generateForm.projectName" type="text">
     </div>
 
-    <div class="generate-form-div generate-form-label generate-form-input">
-      <label for="input-packageName">Package name</label>
-      <input type="text" id="input-packageName" v-model="generateForm.packageName">
+    <div class="generate-form-div ">
+      <label for="input-packageName" class="generate-form-label">Package name</label>
+      <input type="text" id="input-packageName" class="generate-form-input" v-model="generateForm.packageName">
     </div>
 
     <input class="generate-form-submit" type="button" @click="submit" value="下载">
+
+
   </div>
 </template>
 
@@ -48,6 +51,7 @@ export default {
   },
   methods: {
     submit: function () {
+
       axios.post('/archetype/generate', this.generateForm, {
         responseType: 'blob'
       }).then(res => {
@@ -69,30 +73,61 @@ export default {
 </script>
 
 <style scoped>
+
 .generate-form {
-  width: 30%;
-  margin: 50px auto 0;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 500px;
+  background: #FFF;
+  padding: 30px 30px 20px 30px;
+  box-shadow: rgba(187, 187, 187, 1) 0 0px 20px -1px;
+  -webkit-box-shadow: rgba(187, 187, 187, 1) 0 0px 20px -1px;
+  font: 12px Arial, Helvetica, sans-serif;
+  color: #666;
+  border-radius: 10px;
+  -webkit-border-radius: 10px;
 }
 
 .generate-form-div {
-  width: 100%;
-  height: 40px;
-  padding-left: 50px;
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
 }
 
 .generate-form-label {
-  text-align: left;
-  font-size: 16px;
+  alignment: left;
+  width: 150px;
 }
 
 .generate-form-input {
-
+  color: #555;
+  width: 100%;
+  padding: 3px 0px 3px 5px;
+  margin-top: 2px;
+  margin-right: 6px;
+  margin-bottom: 16px;
+  border: 1px solid #e5e5e5;
+  background: transparent;
+  height: 25px;
+  line-height: 15px;
+  outline: 0;
 }
 
 .generate-form-submit {
-  text-align: left;
-  alignment: left;
-  align-self: self-start;
-  margin-left: 50px;
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ff5bb0), color-stop(1, #ef027d));
+  border-radius: 9px;
+  -webkit-border-radius: 9px;
+  border: 1px solid #ee1eb5;
+  display: inline-block;
+  color: #ffffff;
+  font-size: 15px;
+  font-weight: bold;
+  font-style: normal;
+  height: 40px;
+  line-height: 30px;
+  width: 100px;
+  text-decoration: none;
+  text-align: center;
+  text-shadow: 1px 1px 0px #c70067;
 }
 </style>
\ No newline at end of file
-- 
GitLab