tt/youlai-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 🐛 修复小程序样式不生效问题

Browse Source
This commit is contained in:
zhangyuanpeng
2024-11-28 17:08:54 +08:00
parent a74f45824b
commit 6a3ccd309b
3 changed files with 95 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
src/pages/mine/profile/index.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<view> <view class="profile">
<view v-if="userProfile" class="profile-card"> <view v-if="userProfile" class="profile-card">
<wd-cell-group border> <wd-cell-group border>
<wd-cell class="avatar-cell" title="头像" center is-link> <wd-cell class="avatar-cell" title="头像" center is-link>
@@ -71,7 +71,7 @@
v-if="dialog.type === DialogType.ACCOUNT" v-if="dialog.type === DialogType.ACCOUNT"
ref="userProfileFormRef" ref="userProfileFormRef"
:model="userProfileForm" :model="userProfileForm"
class="edit-form" custom-class="edit-form"
> >
<wd-cell-group border> <wd-cell-group border>
<wd-input <wd-input
@@ -97,7 +97,7 @@
v-if="dialog.type === DialogType.PASSWORD" v-if="dialog.type === DialogType.PASSWORD"
ref="passwordChangeFormRef" ref="passwordChangeFormRef"
:model="passwordChangeForm" :model="passwordChangeForm"
class="edit-form" custom-class="edit-form"
> >
<wd-cell-group border> <wd-cell-group border>
<wd-input <wd-input
@@ -139,7 +139,7 @@
v-if="dialog.type === DialogType.MOBILE" v-if="dialog.type === DialogType.MOBILE"
ref="mobileBindingFormRef" ref="mobileBindingFormRef"
:model="mobileBindingForm" :model="mobileBindingForm"
class="edit-form" custom-class="edit-form"
> >
<wd-cell-group border> <wd-cell-group border>
<wd-input <wd-input
@@ -179,7 +179,7 @@
v-if="dialog.type === DialogType.EMAIL" v-if="dialog.type === DialogType.EMAIL"
ref="emailBindingFormRef" ref="emailBindingFormRef"
:model="emailBindingForm" :model="emailBindingForm"
class="edit-form" custom-class="edit-form"
> >
<wd-cell-group border> <wd-cell-group border>
<wd-input <wd-input
@@ -458,49 +458,51 @@ function touchmoveListener(event) {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.profile-card { .profile {
padding: 10rpx; .profile-card {
margin-bottom: 24rpx; padding: 10rpx;
line-height: 1.1; margin-bottom: 24rpx;
background-color: rgb(255, 255, 255); line-height: 1.1;
border-radius: 16px; background-color: rgb(255, 255, 255);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.05); border-radius: 16px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.05);
.avatar-cell { .avatar-cell {
:deep(.wd-cell__body) { :deep(.wd-cell__body) {
align-items: center; align-items: center;
} }
.avatar { .avatar {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: right; justify-content: right;
.img { .img {
position: relative; position: relative;
width: 80px; width: 80px;
height: 80px; height: 80px;
background-color: rgba(0, 0, 0, 0.04); background-color: rgba(0, 0, 0, 0.04);
border-radius: 50%; border-radius: 50%;
.img-icon { .img-icon {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
font-size: 60px; font-size: 60px;
color: #fff; color: #fff;
-webkit-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
} }
} }
} }
} }
} .edit-form {
.edit-form { padding-top: 40rpx;
padding-top: 40rpx; .ef-radio-group {
.ef-radio-group { line-height: 1;
line-height: 1; text-align: left;
text-align: left; }
} .footer {
.footer { padding: 24rpx;
padding: 24rpx; }
} }
} }
</style> </style>

66
src/pages/work/role/index.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<view> <view class="role">
<!-- 筛选 --> <!-- 筛选 -->
<wd-drop-menu> <wd-drop-menu>
<wd-drop-menu-item ref="filterDropMenu" icon="filter" icon-size="18px" title="筛选"> <wd-drop-menu-item ref="filterDropMenu" icon="filter" icon-size="18px" title="筛选">
@@ -11,8 +11,8 @@
placeholder="请输入关键字" placeholder="请输入关键字"
/> />
<view class="flex-between py-2"> <view class="flex-between py-2">
<wd-button class="w-20%" type="info" @click="handleResetQuery">重置</wd-button> <wd-button custom-class="w-20per" type="info" @click="handleResetQuery">重置</wd-button>
<wd-button class="w-70%" @click="handleQuery">确定</wd-button> <wd-button custom-class="w-70per" @click="handleQuery">确定</wd-button>
</view> </view>
</view> </view>
</wd-drop-menu-item> </wd-drop-menu-item>
@@ -65,7 +65,7 @@
@click="handleOpenDialog(null)" @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-form ref="roleFormRef" :model="formData" :rules="rules">
<wd-cell-group border> <wd-cell-group border>
<wd-input v-model="formData.name" label="角色名称" prop="name" /> <wd-input v-model="formData.name" label="角色名称" prop="name" />
@@ -290,30 +290,44 @@ onLoad(() => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
:deep(.wd-drop-menu .wd-drop-menu__item) { .role {
display: flex; :deep(.wd-drop-menu .wd-drop-menu__item) {
justify-content: flex-end; display: flex;
padding: 0 50rpx; justify-content: flex-end;
} padding: 0 50rpx;
.list-container { }
.role-card { .list-container {
margin-top: 20rpx; .role-card {
:deep(.wd-cell__wrapper) { margin-top: 20rpx;
padding: 4rpx 0; :deep(.wd-cell__wrapper) {
} padding: 4rpx 0;
:deep(.wd-cell) { }
padding-right: 10rpx; :deep(.wd-cell) {
background: #f8f8f8; padding-right: 10rpx;
background: #f8f8f8;
}
} }
} }
} :deep(.wd-fab__trigger) {
:deep(.wd-fab__trigger) { width: 80rpx !important;
width: 80rpx !important; height: 80rpx !important;
height: 80rpx !important; }
} .yl-popup {
.yl-popup { .footer {
.footer { margin: 30rpx 0;
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> </style>

12
src/pages/work/user/index.vue
View File

@@ -26,8 +26,10 @@
<cu-date-query v-model="queryParams.createTime" label="创建时间" /> <cu-date-query v-model="queryParams.createTime" label="创建时间" />
<view class="flex-between py-2"> <view class="flex-between py-2">
<wd-button class="w-20%" type="info" @click="handleResetQuery">重置</wd-button> <wd-button custom-class="w-20per" type="info" @click="handleResetQuery">
<wd-button class="w-70%" @click="handleQuery">查询</wd-button> 重置
</wd-button>
<wd-button custom-class="w-70per" @click="handleQuery">查询</wd-button>
</view> </view>
</view> </view>
</wd-drop-menu-item> </wd-drop-menu-item>
@@ -376,5 +378,11 @@ onLoad(() => {
width: 80rpx !important; width: 80rpx !important;
height: 80rpx !important; height: 80rpx !important;
} }
:deep(.w-20per) {
width: 20%;
}
:deep(.w-70per) {
width: 70%;
}
} }
</style> </style>