feat(comp-uploader-hwobs): 优化上传组件的样式

novel-app/src/app/comp-uploader-hwobs/comp-uploader-hwobs.component.html

@@ -1,3 +1,5 @@
-<h1>请上传人物形象：</h1>
-<input type="file" multiple (change)="onFileChange($event)"/>
-<button (click)="upload()">上传</button>
+<div class="upload-container">
+  <h1 class="upload-title">人物形象上传：</h1>
+  <input type="file" multiple (change)="onFileChange($event)" class="file-input"/>
+  <button (click)="upload()" class="upload-button">上传</button>
+</div>

novel-app/src/app/comp-uploader-hwobs/comp-uploader-hwobs.component.scss

@@ -0,0 +1,43 @@
+.upload-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  background-color: #f9f9f9; /* 背景色 */
+  border: 2px dashed #007bff; /* 虚线边框 */
+  border-radius: 10px; /* 圆角 */
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
+  max-width: 400px; /* 最大宽度 */
+  margin: 20px auto; /* 居中 */
+}
+
+.upload-title {
+  font-size: 1.5em; /* 字体大小 */
+  color: #333; /* 字体颜色 */
+  margin-bottom: 20px; /* 下边距 */
+}
+
+.file-input {
+  margin-bottom: 15px; /* 下边距 */
+  padding: 10px; /* 内边距 */
+  border: 1px solid #ccc; /* 边框 */
+  border-radius: 5px; /* 圆角 */
+  width: 100%; /* 宽度100% */
+  cursor: pointer; /* 鼠标指针 */
+}
+
+.upload-button {
+  padding: 10px 20px; /* 内边距 */
+  background-color: #007bff; /* 按钮背景色 */
+  color: white; /* 按钮文字颜色 */
+  border: none; /* 去掉边框 */
+  border-radius: 5px; /* 圆角 */
+  cursor: pointer; /* 鼠标指针 */
+  font-size: 1em; /* 字体大小 */
+  transition: background-color 0.3s; /* 背景色变化过渡 */
+}
+
+.upload-button:hover {
+  background-color: #0056b3; /* 悬停时的背景色 */
+}