@opendesign-plus/components 0.0.1-rc.96 → 0.0.1-rc.98

package/dist/treeshaking/components/user-center/verify/Verify.css

@@ -6,7 +6,11 @@
     transform: rotate(-180deg);
 }
 }
-.verifybox {
+
+/* 验证码样式统一收敛到根节点类名 .o-user-center-verify 下，避免打包后污染宿主全局样式。
+   使用 :where() 包裹以保持原有选择器优先级不变，
+   确保 user-center.scss 中 .o-user-center-dialog 对 .verifybox 的覆盖样式仍然按特异性生效 */
+:where(.o-user-center-verify) .verifybox {
   /* #f3524d */
   --varify-error-color1: 243, 82, 77;
   --varify-error-color2: 230, 0, 18;
@@ -21,7 +25,7 @@
   transform: translate(-50%, -50%);
   z-index: 4;
 }
-.verifybox-top {
+:where(.o-user-center-verify) .verifybox-top {
   padding: 0 15px;
   height: 50px;
   line-height: 50px;
@@ -31,11 +35,11 @@
   border-bottom: 1px solid #e4e7eb;
   box-sizing: border-box;
 }
-.verifybox-bottom {
+:where(.o-user-center-verify) .verifybox-bottom {
   padding: 15px;
   box-sizing: border-box;
 }
-.verifybox-close {
+:where(.o-user-center-verify) .verifybox-close {
   position: absolute;
   top: 13px;
   right: 9px;
@@ -44,7 +48,10 @@
   text-align: center;
   cursor: pointer;
 }
-.mask {
+:where(.o-user-center-verify) {
+  /* 根节点自身的遮罩样式 */
+}
+:where(.o-user-center-verify).mask {
   position: fixed;
   top: 0;
   left: 0;
@@ -57,7 +64,7 @@
   touch-action: none;
   touch-action: pan-y;
 }
-.verify-tips {
+:where(.o-user-center-verify) .verify-tips {
   position: absolute;
   left: 0px;
   bottom: 0px;
@@ -67,58 +74,59 @@
   color: #fff;
   z-index: 4;
 }
-.suc-bg {
+:where(.o-user-center-verify) .suc-bg {
   background-color: rgba(109, 195, 53, 0.5);
   filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7f5CB85C, endcolorstr=#7f5CB85C);
 }
-.err-bg {
+:where(.o-user-center-verify) .err-bg {
   background-color: rgba(243, 82, 77, 0.5);
   filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7fD9534F, endcolorstr=#7fD9534F);
 }
-.tips-enter,
-.tips-leave-to {
+:where(.o-user-center-verify) .tips-enter,
+:where(.o-user-center-verify) .tips-leave-to {
   bottom: -30px;
 }
-.tips-enter-active,
-.tips-leave-active {
+:where(.o-user-center-verify) .tips-enter-active,
+:where(.o-user-center-verify) .tips-leave-active {
   transition: bottom 0.1s;
 }
-
-/* ---------------------------- */
-/*常规验证码*/
-.verify-code {
+:where(.o-user-center-verify) {
+  /* ---------------------------- */
+  /*常规验证码*/
+}
+:where(.o-user-center-verify) .verify-code {
   font-size: 20px;
   text-align: center;
   cursor: pointer;
   margin-bottom: 5px;
   border: 1px solid #ddd;
 }
-.cerify-code-panel {
+:where(.o-user-center-verify) .cerify-code-panel {
   height: 100%;
   overflow: hidden;
 }
-.verify-code-area {
+:where(.o-user-center-verify) .verify-code-area {
   float: left;
 }
-.verify-input-area {
+:where(.o-user-center-verify) .verify-input-area {
   float: left;
   width: 60%;
   padding-right: 10px;
 }
-.verify-change-area {
+:where(.o-user-center-verify) .verify-change-area {
   line-height: 30px;
   float: left;
 }
-.varify-input-code {
+:where(.o-user-center-verify) .varify-input-code {
   display: inline-block;
   width: 100%;
   height: 25px;
 }
-.verify-change-code {
+:where(.o-user-center-verify) .verify-change-code {
   color: #337ab7;
   cursor: pointer;
 }
-.verify-btn {
+:where(.o-user-center-verify) .verify-btn {
   width: 200px;
   height: 30px;
   background-color: #337ab7;
@@ -126,15 +134,16 @@
   border: none;
   margin-top: 10px;
 }
-
-/*滑动验证码*/
-.verify-bar-area {
+:where(.o-user-center-verify) {
+  /*滑动验证码*/
+}
+:where(.o-user-center-verify) .verify-bar-area {
   background: #ffffff;
   text-align: center;
   border: 1px solid #ddd;
   -webkit-border-radius: 4px;
 }
-.verify-bar-area .verify-move-block {
+:where(.o-user-center-verify) .verify-bar-area .verify-move-block {
   transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1);
   position: absolute;
   bottom: -1px;
@@ -143,12 +152,12 @@
   cursor: pointer;
   border: 1px solid rgba(var(--o-black), 0.6);
 }
-.verify-bar-area .verify-move-block:hover {
+:where(.o-user-center-verify) .verify-bar-area .verify-move-block:hover {
   background-color: var(--o-color-primary2) !important;
   border: var(--o-color-primary2) !important;
   color: #ffffff;
 }
-.verify-bar-area .verify-left-bar {
+:where(.o-user-center-verify) .verify-bar-area .verify-left-bar {
   position: absolute;
   bottom: 0px;
   left: 0px;
@@ -158,17 +167,17 @@
   transition: border-color 200ms cubic-bezier(0.2, 0, 0, 1);
   font-size: 0;
 }
-.verify-bar-area .verify-left-bar:hover {
+:where(.o-user-center-verify) .verify-bar-area .verify-left-bar:hover {
   border-color: var(--o-color-primary2) !important;
 }
-.verify-img-panel {
+:where(.o-user-center-verify) .verify-img-panel {
   margin: 0;
   border-top: 1px solid #ddd;
   border-bottom: 1px solid #ddd;
   border-radius: 3px;
   position: relative;
 }
-.verify-img-panel .verify-refresh {
+:where(.o-user-center-verify) .verify-img-panel .verify-refresh {
   width: 32px;
   height: 32px;
   background-color: rgba(0, 0, 0, 0.4);
@@ -180,7 +189,7 @@
   right: 6px;
   z-index: 2;
 }
-.verify-img-panel .icon-refresh {
+:where(.o-user-center-verify) .verify-img-panel .icon-refresh {
   font-size: 20px;
   color: #fff;
   display: flex;
@@ -188,37 +197,37 @@
   justify-content: center;
   align-items: center;
 }
-.verify-img-panel .verify-gap {
+:where(.o-user-center-verify) .verify-img-panel .verify-gap {
   background-color: #fff;
   position: relative;
   z-index: 2;
   border: 1px solid #fff;
 }
-.verify-bar-area .verify-move-block .verify-sub-block {
+:where(.o-user-center-verify) .verify-bar-area .verify-move-block .verify-sub-block {
   position: absolute;
   text-align: center;
   z-index: 3;
 }
-.verify-bar-area .verify-move-block .verify-icon {
+:where(.o-user-center-verify) .verify-bar-area .verify-move-block .verify-icon {
   font-size: 40px;
   transition: color 200ms cubic-bezier(0.2, 0, 0, 1);
   color: #000;
 }
-.verify-bar-area .verify-move-block .verify-icon:hover {
+:where(.o-user-center-verify) .verify-bar-area .verify-move-block .verify-icon:hover {
   color: #fff;
 }
-.verify-bar-area .verify-msg {
+:where(.o-user-center-verify) .verify-bar-area .verify-msg {
   z-index: 3;
   font-size: 16px;
 }
-.iconfont {
+:where(.o-user-center-verify) .iconfont {
   font-family: "iconfont" !important;
   font-size: 16px;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-.icon-check:before {
+:where(.o-user-center-verify) .icon-check:before {
   content: " ";
   display: block;
   width: 32px;
@@ -233,11 +242,11 @@
   background-image: url("../svg-icons/icon-done.svg");
   background-size: contain;
 }
-.icon-close:hover {
+:where(.o-user-center-verify) .icon-close:hover {
   transform: rotate(180deg);
   color: var(--o-color-primary1);
 }
-.icon-close {
+:where(.o-user-center-verify) .icon-close {
   content: " ";
   display: block;
   width: 24px;
@@ -252,7 +261,7 @@
   background-size: contain;
   transition: transform var(--o-easing-standard) var(--o-duration-m2);
 }
-.icon-right:before {
+:where(.o-user-center-verify) .icon-right:before {
   content: " ";
   display: block;
   width: 32px;
@@ -268,7 +277,7 @@
   background-image: url("../svg-icons/icon-chevron-right.svg");
   background-size: contain;
 }
-.icon-refresh {
+:where(.o-user-center-verify) .icon-refresh {
   content: " ";
   display: block;
   position: absolute;

package/dist/treeshaking/components/user-center/verify/Verify.vue.mjs

@@ -11,7 +11,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_IconClose = resolveComponent("IconClose");
   return $setup.clickShow ? (openBlock(), createElementBlock("div", {
     key: 0,
-    class: normalizeClass($props.mode == "pop" ? "mask" : ""),
+    class: normalizeClass(["o-user-center-verify", $props.mode == "pop" ? "mask" : ""]),
     onTouchstart: withModifiers(() => {
     }, ["prevent"])
   }, [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendesign-plus/components",
-  "version": "0.0.1-rc.96",
+  "version": "0.0.1-rc.98",
   "type": "module",
   "publishConfig": {
     "access": "public",
@@ -47,7 +47,7 @@
     "vue": "^3.5.13",
     "element-plus": "2.13.1",
     "@opendesign-plus/composables": "0.0.1-rc.10",
-    "@opendesign-plus/styles": "0.0.1-rc.3"
+    "@opendesign-plus/styles": "0.0.1-rc.5"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.1",