组件样式分离测试

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": {

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%;
+    }
+}

packages/DevicePreview/src/index.vue

@@ -29,6 +29,7 @@
 </template>
 
 <script>
+import './index.scss'
 export default {
   name: 'DevicePreview',
   props:{
@@ -53,68 +54,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-.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%;
-}
-</style>

packages/PromptText/index.js

@@ -1,5 +1,4 @@
 import PromptText from './src/index.vue'
-
 PromptText.install = function(Vue) {
   Vue.component(PromptText.name || 'PromptText', PromptText)
 }

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;
+}

packages/PromptText/src/index.vue

@@ -15,7 +15,7 @@
   </div>
 </template>
 <script>
-
+import './index.scss'
 export default {
   name: 'PromptText',
   props: {
@@ -56,46 +56,3 @@ export default {
   }
 }
 </script>
-<style scoped lang="scss">
-.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;
-}
-
-.info {
-  background: #F2F7FF;
-  border: 1px solid #BFDAFF;
-}
-
-.notice {
-  background: #FEFCE8;
-  border: 1px solid rgba(255, 140, 0, 0.3);
-}
-
-.warning {
-  background: #FFF1F0;
-  border: 1px solid #FFA39E;
-}
-
-.prompt-icon {
-  width: 16px;
-  height: 16px;
-  ;
-  margin-right: 8px;
-}
-
-.prompt-desc {
-  color: #1E2226;
-  letter-spacing: 0.08em;
-}
-
-.prompt-extra {}
-</style>

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%;
+//     }
+// }