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>
<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>

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

@@ -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>

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

@@ -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>