diff --git a/src/App.vue b/src/App.vue index 166e072..f39768d 100644 --- a/src/App.vue +++ b/src/App.vue @@ -6,19 +6,39 @@ -
-
+
+
选择主题 + +
+
选择配色主题
+
+ +
+
文件上传 - @@ -39,12 +59,6 @@ @change="onFileChange" /> {{ uploadMessage }} - - 支持点击上传或拖拽 CSV/XLS/XLSX。模板: - xlsx - / - csv -
@@ -58,28 +72,6 @@
-
-
选择配色主题
-
- -
-
@@ -224,7 +216,6 @@ import iconWebLogo from '../assets/icons/webicon.png'; import iconTitle from '../assets/icons/星程字体转换.svg'; import iconChooseColor from '../assets/icons/choose-color.svg'; import iconUpload from '../assets/icons/upload.svg'; -import iconContent from '../assets/icons/content.svg'; import iconExport from '../assets/icons/export.svg'; import iconExportSvg from '../assets/icons/export-svg.svg'; import iconExportPng from '../assets/icons/export-png.svg'; @@ -263,7 +254,6 @@ const themes = [ const selectedThemeId = ref<(typeof themes)[number]['id']>('purple'); const showThemePicker = ref(false); -const showUploadTip = ref(false); const uploadMessage = ref('点击上传或将csv/xls文件拖到这里上传'); const parseError = ref(''); const buildError = ref(''); @@ -441,10 +431,6 @@ function pickTheme(themeId: (typeof themes)[number]['id']): void { showThemePicker.value = false; } -function toggleUploadTip(): void { - showUploadTip.value = !showUploadTip.value; -} - function toggleSourceDescription(column: number): void { if (mapping.sourceDescriptionColumns.includes(column)) { mapping.sourceDescriptionColumns = mapping.sourceDescriptionColumns.filter((item) => item !== column); diff --git a/src/styles.css b/src/styles.css index fd7d19b..de32211 100644 --- a/src/styles.css +++ b/src/styles.css @@ -76,6 +76,10 @@ body { gap: 4px; } +.theme-trigger { + position: relative; +} + .tool-label { color: #1d2129; font-size: 14px; @@ -100,11 +104,6 @@ body { object-fit: contain; } -.icon-btn.tiny { - width: 14px; - height: 14px; -} - .upload-area { min-width: 280px; max-width: 420px; @@ -115,6 +114,7 @@ body { align-items: center; padding: 4px 10px; background: var(--fill-1); + border: 1px solid var(--fill-3); cursor: pointer; position: relative; } @@ -128,26 +128,6 @@ body { font-size: 12px; } -.upload-tip { - position: absolute; - left: 0; - top: 44px; - z-index: 5; - width: 100%; - border: 1px solid var(--primary-7); - background: #fff; - border-radius: 8px; - padding: 8px; - color: var(--text-4); - font-size: 12px; -} - -.upload-tip a { - color: var(--primary-7); - text-decoration: none; - font-weight: 500; -} - .export-box { display: flex; gap: 6px; @@ -170,8 +150,9 @@ body { .theme-popover { position: absolute; - top: 80px; - right: 290px; + top: calc(100% + 8px); + left: 50%; + transform: translateX(-50%); width: 280px; border: 1px solid var(--primary-7); border-radius: 24px 24px 0 0; @@ -180,6 +161,19 @@ body { padding: 8px; } +.theme-popover::before { + content: ''; + position: absolute; + top: -8px; + left: 50%; + width: 14px; + height: 14px; + background: #fff; + border-top: 1px solid var(--primary-7); + border-left: 1px solid var(--primary-7); + transform: translateX(-50%) rotate(45deg); +} + .theme-header { text-align: center; color: var(--primary-6); @@ -388,11 +382,6 @@ body { flex-wrap: wrap; } - .theme-popover { - right: 12px; - top: 120px; - } - .content { grid-template-columns: 1fr; }