From 57191cd0f38f6c18d6f828c318a32d3cced90fb6 Mon Sep 17 00:00:00 2001
From: zq <136432190602163.com>
Date: Wed, 16 Jul 2025 16:57:14 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F=E5=88=86?=
=?UTF-8?q?=E7=A6=BB=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
package.json | 2 +-
packages/DevicePreview/src/index.scss | 64 ++++++++++++++++++++
packages/DevicePreview/src/index.vue | 68 +--------------------
packages/PromptText/index.js | 1 -
packages/PromptText/src/index.scss | 41 +++++++++++++
packages/PromptText/src/index.vue | 47 +--------------
packages/styles/component.scss | 107 ++++++++++++++++++++++++++++++++++
7 files changed, 217 insertions(+), 113 deletions(-)
create mode 100644 packages/DevicePreview/src/index.scss
create mode 100644 packages/PromptText/src/index.scss
create mode 100644 packages/styles/component.scss
diff --git a/package.json b/package.json
index 18f8d0d..2434727 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@zhicheng1012/zhicheng-components",
- "version": "1.0.10",
+ "version": "1.0.11",
"description": "A Vue 2 component library",
"main": "dist/zhicheng-components.umd.js",
"publishConfig": {
diff --git a/packages/DevicePreview/src/index.scss b/packages/DevicePreview/src/index.scss
new file mode 100644
index 0000000..04a5086
--- /dev/null
+++ b/packages/DevicePreview/src/index.scss
@@ -0,0 +1,64 @@
+
+.preview-container {
+ max-width: 800px;
+ min-width: 300px;
+ margin: 0 auto;
+ padding: 24px;
+ border-radius: 4px;
+ background: #FAFAFA;
+
+ .preview_top {
+ margin-bottom: 20px;
+ }
+
+ .preview-title {
+ text-align: center;
+ color: #1E2226;
+ }
+
+ .toggle-container {
+ display: flex;
+ height: 26px;
+ justify-content: center;
+ align-items: center;
+ padding: 3px 6px;
+ border-radius: 4px;
+ background: #F2F3F5;
+ }
+
+ .toggle-button {
+ padding: 1px 12px;
+ border-radius: 2px;
+ box-sizing: border-box;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ }
+
+ .toggle-button.active {
+ color: #006AFF;
+ background: #FFFFFF;
+ }
+
+ .toggle-button.active:after {
+ /* content: '';
+ position: absolute;
+ bottom: -11px;
+ left: 0;
+ width: 100%;
+ height: 2px;
+ background-color: #1890ff; */
+ }
+
+ .content-container {
+ /* min-height: 300px;
+ padding: 20px;
+ border: 2px solid #ffd700;
+ border-radius: 4px;
+ background-color: #fff; */
+ }
+
+ .desktop-view,
+ .mobile-view {
+ width: 100%;
+ }
+}
\ No newline at end of file
diff --git a/packages/DevicePreview/src/index.vue b/packages/DevicePreview/src/index.vue
index 599d641..725796f 100644
--- a/packages/DevicePreview/src/index.vue
+++ b/packages/DevicePreview/src/index.vue
@@ -29,6 +29,7 @@
-
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/packages/PromptText/index.js b/packages/PromptText/index.js
index 50c6797..ab39004 100644
--- a/packages/PromptText/index.js
+++ b/packages/PromptText/index.js
@@ -1,5 +1,4 @@
import PromptText from './src/index.vue'
-
PromptText.install = function(Vue) {
Vue.component(PromptText.name || 'PromptText', PromptText)
}
diff --git a/packages/PromptText/src/index.scss b/packages/PromptText/src/index.scss
new file mode 100644
index 0000000..e682e14
--- /dev/null
+++ b/packages/PromptText/src/index.scss
@@ -0,0 +1,41 @@
+.prompt-text {
+ padding: 8px 13px;
+ border-radius: 4px;
+
+ .flex-text {
+ display: flex;
+ align-items: center;
+ align-self: stretch;
+ justify-content: space-between;
+ z-index: 1;
+ }
+
+ .prompt-icon {
+ width: 16px;
+ height: 16px;
+ ;
+ margin-right: 8px;
+ }
+
+ .prompt-desc {
+ color: #1E2226;
+ letter-spacing: 0.08em;
+ }
+
+ .prompt-extra {}
+}
+
+.prompt-text.info {
+ background: #F2F7FF;
+ border: 1px solid #BFDAFF;
+}
+
+.prompt-text.notice {
+ background: #FEFCE8;
+ border: 1px solid rgba(255, 140, 0, 0.3);
+}
+
+.prompt-text.warning {
+ background: #FFF1F0;
+ border: 1px solid #FFA39E;
+}
diff --git a/packages/PromptText/src/index.vue b/packages/PromptText/src/index.vue
index e6a10fc..5025423 100644
--- a/packages/PromptText/src/index.vue
+++ b/packages/PromptText/src/index.vue
@@ -15,7 +15,7 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/packages/styles/component.scss b/packages/styles/component.scss
new file mode 100644
index 0000000..ef0a628
--- /dev/null
+++ b/packages/styles/component.scss
@@ -0,0 +1,107 @@
+// 提示框组件
+// .prompt-text {
+// padding: 8px 13px;
+// border-radius: 4px;
+
+// .flex-text {
+// display: flex;
+// align-items: center;
+// align-self: stretch;
+// justify-content: space-between;
+// z-index: 1;
+// }
+
+// .prompt-icon {
+// width: 16px;
+// height: 16px;
+// ;
+// margin-right: 8px;
+// }
+
+// .prompt-desc {
+// color: #1E2226;
+// letter-spacing: 0.08em;
+// }
+
+// .prompt-extra {}
+// }
+
+// .prompt-text.info {
+// background: #F2F7FF;
+// border: 1px solid #BFDAFF;
+// }
+
+// .prompt-text.notice {
+// background: #FEFCE8;
+// border: 1px solid rgba(255, 140, 0, 0.3);
+// }
+
+// .prompt-text.warning {
+// background: #FFF1F0;
+// border: 1px solid #FFA39E;
+// }
+
+// // 实时预览外框组件
+// .preview-container {
+// max-width: 800px;
+// min-width: 300px;
+// margin: 0 auto;
+// padding: 24px;
+// border-radius: 4px;
+// background: #FAFAFA;
+
+// .preview_top {
+// margin-bottom: 20px;
+// }
+
+// .preview-title {
+// text-align: center;
+// color: #1E2226;
+// }
+
+// .toggle-container {
+// display: flex;
+// height: 26px;
+// justify-content: center;
+// align-items: center;
+// padding: 3px 6px;
+// border-radius: 4px;
+// background: #F2F3F5;
+// }
+
+// .toggle-button {
+// padding: 1px 12px;
+// border-radius: 2px;
+// box-sizing: border-box;
+// cursor: pointer;
+// transition: all 0.3s ease;
+// }
+
+// .toggle-button.active {
+// color: #006AFF;
+// background: #FFFFFF;
+// }
+
+// .toggle-button.active:after {
+// /* content: '';
+// position: absolute;
+// bottom: -11px;
+// left: 0;
+// width: 100%;
+// height: 2px;
+// background-color: #1890ff; */
+// }
+
+// .content-container {
+// /* min-height: 300px;
+// padding: 20px;
+// border: 2px solid #ffd700;
+// border-radius: 4px;
+// background-color: #fff; */
+// }
+
+// .desktop-view,
+// .mobile-view {
+// width: 100%;
+// }
+// }
\ No newline at end of file