diff --git a/src/pages/mine/profile/index.vue b/src/pages/mine/profile/index.vue
index 976edac..2269c68 100644
--- a/src/pages/mine/profile/index.vue
+++ b/src/pages/mine/profile/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <view>
+  <view class="profile">
     <view v-if="userProfile" class="profile-card">
       <wd-cell-group border>
         <wd-cell class="avatar-cell" title="头像" center is-link>
@@ -71,7 +71,7 @@
         v-if="dialog.type === DialogType.ACCOUNT"
         ref="userProfileFormRef"
         :model="userProfileForm"
-        class="edit-form"
+        custom-class="edit-form"
       >
         <wd-cell-group border>
           <wd-input
@@ -97,7 +97,7 @@
         v-if="dialog.type === DialogType.PASSWORD"
         ref="passwordChangeFormRef"
         :model="passwordChangeForm"
-        class="edit-form"
+        custom-class="edit-form"
       >
         <wd-cell-group border>
           <wd-input
@@ -139,7 +139,7 @@
         v-if="dialog.type === DialogType.MOBILE"
         ref="mobileBindingFormRef"
         :model="mobileBindingForm"
-        class="edit-form"
+        custom-class="edit-form"
       >
         <wd-cell-group border>
           <wd-input
@@ -179,7 +179,7 @@
         v-if="dialog.type === DialogType.EMAIL"
         ref="emailBindingFormRef"
         :model="emailBindingForm"
-        class="edit-form"
+        custom-class="edit-form"
       >
         <wd-cell-group border>
           <wd-input
@@ -458,49 +458,51 @@ function touchmoveListener(event) {
 }
 </script>
 <style lang="scss" scoped>
-.profile-card {
-  padding: 10rpx;
-  margin-bottom: 24rpx;
-  line-height: 1.1;
-  background-color: rgb(255, 255, 255);
-  border-radius: 16px;
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.05);
+.profile {
+  .profile-card {
+    padding: 10rpx;
+    margin-bottom: 24rpx;
+    line-height: 1.1;
+    background-color: rgb(255, 255, 255);
+    border-radius: 16px;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.05);
 
-  .avatar-cell {
-    :deep(.wd-cell__body) {
-      align-items: center;
-    }
-    .avatar {
-      display: flex;
-      align-items: center;
-      justify-content: right;
-      .img {
-        position: relative;
-        width: 80px;
-        height: 80px;
-        background-color: rgba(0, 0, 0, 0.04);
-        border-radius: 50%;
-        .img-icon {
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          font-size: 60px;
-          color: #fff;
-          -webkit-transform: translate(-50%, -50%);
-          transform: translate(-50%, -50%);
+    .avatar-cell {
+      :deep(.wd-cell__body) {
+        align-items: center;
+      }
+      .avatar {
+        display: flex;
+        align-items: center;
+        justify-content: right;
+        .img {
+          position: relative;
+          width: 80px;
+          height: 80px;
+          background-color: rgba(0, 0, 0, 0.04);
+          border-radius: 50%;
+          .img-icon {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            font-size: 60px;
+            color: #fff;
+            -webkit-transform: translate(-50%, -50%);
+            transform: translate(-50%, -50%);
+          }
         }
       }
     }
   }
-}
-.edit-form {
-  padding-top: 40rpx;
-  .ef-radio-group {
-    line-height: 1;
-    text-align: left;
-  }
-  .footer {
-    padding: 24rpx;
+  .edit-form {
+    padding-top: 40rpx;
+    .ef-radio-group {
+      line-height: 1;
+      text-align: left;
+    }
+    .footer {
+      padding: 24rpx;
+    }
   }
 }
 </style>
diff --git a/src/pages/work/role/index.vue b/src/pages/work/role/index.vue
index 7149165..94c1cbc 100644
--- a/src/pages/work/role/index.vue
+++ b/src/pages/work/role/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <view>
+  <view class="role">
     <!-- 筛选 -->
     <wd-drop-menu>
       <wd-drop-menu-item ref="filterDropMenu" icon="filter" icon-size="18px" title="筛选">
@@ -11,8 +11,8 @@
             placeholder="请输入关键字"
           />
           <view class="flex-between py-2">
-            <wd-button class="w-20%" type="info" @click="handleResetQuery">重置</wd-button>
-            <wd-button class="w-70%" @click="handleQuery">确定</wd-button>
+            <wd-button custom-class="w-20per" type="info" @click="handleResetQuery">重置</wd-button>
+            <wd-button custom-class="w-70per" @click="handleQuery">确定</wd-button>
           </view>
         </view>
       </wd-drop-menu-item>
@@ -65,7 +65,7 @@
       @click="handleOpenDialog(null)"
     />
 
-    <wd-popup v-model="dialog.visible" position="bottom" class="yl-popup">
+    <wd-popup v-model="dialog.visible" position="bottom" custom-class="yl-popup">
       <wd-form ref="roleFormRef" :model="formData" :rules="rules">
         <wd-cell-group border>
           <wd-input v-model="formData.name" label="角色名称" prop="name" />
@@ -290,30 +290,44 @@ onLoad(() => {
 </script>
 
 <style lang="scss" scoped>
-:deep(.wd-drop-menu .wd-drop-menu__item) {
-  display: flex;
-  justify-content: flex-end;
-  padding: 0 50rpx;
-}
-.list-container {
-  .role-card {
-    margin-top: 20rpx;
-    :deep(.wd-cell__wrapper) {
-      padding: 4rpx 0;
-    }
-    :deep(.wd-cell) {
-      padding-right: 10rpx;
-      background: #f8f8f8;
+.role {
+  :deep(.wd-drop-menu .wd-drop-menu__item) {
+    display: flex;
+    justify-content: flex-end;
+    padding: 0 50rpx;
+  }
+  .list-container {
+    .role-card {
+      margin-top: 20rpx;
+      :deep(.wd-cell__wrapper) {
+        padding: 4rpx 0;
+      }
+      :deep(.wd-cell) {
+        padding-right: 10rpx;
+        background: #f8f8f8;
+      }
     }
   }
-}
-:deep(.wd-fab__trigger) {
-  width: 80rpx !important;
-  height: 80rpx !important;
-}
-.yl-popup {
-  .footer {
-    margin: 30rpx 0;
+  :deep(.wd-fab__trigger) {
+    width: 80rpx !important;
+    height: 80rpx !important;
+  }
+  .yl-popup {
+    .footer {
+      margin: 30rpx 0;
+    }
+  }
+  /**
+   * wot组件直接写class，在小程序上无效
+   * wot组件提供的custom-class属性也不能写unocss的写法
+   * 故wot组件只能使用custom-class属性并在vue文件中自己写样式
+   * 并且custom-class的类名需要使用:deep包裹，否则在小程序上也没有效果
+   */
+  :deep(.w-20per) {
+    width: 20%;
+  }
+  :deep(.w-70per) {
+    width: 70%;
   }
 }
 </style>
diff --git a/src/pages/work/user/index.vue b/src/pages/work/user/index.vue
index c3f3435..1ad344b 100644
--- a/src/pages/work/user/index.vue
+++ b/src/pages/work/user/index.vue
@@ -26,8 +26,10 @@
             <cu-date-query v-model="queryParams.createTime" label="创建时间" />
 
             <view class="flex-between py-2">
-              <wd-button class="w-20%" type="info" @click="handleResetQuery">重置</wd-button>
-              <wd-button class="w-70%" @click="handleQuery">查询</wd-button>
+              <wd-button custom-class="w-20per" type="info" @click="handleResetQuery">
+                重置
+              </wd-button>
+              <wd-button custom-class="w-70per" @click="handleQuery">查询</wd-button>
             </view>
           </view>
         </wd-drop-menu-item>
@@ -376,5 +378,11 @@ onLoad(() => {
     width: 80rpx !important;
     height: 80rpx !important;
   }
+  :deep(.w-20per) {
+    width: 20%;
+  }
+  :deep(.w-70per) {
+    width: 70%;
+  }
 }
 </style>