优化样式
This commit is contained in:
@@ -308,12 +308,15 @@
|
|||||||
.filter-row {
|
.filter-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 20rpx;
|
|
||||||
|
|
||||||
.filter-item {
|
.filter-item {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
|
||||||
|
& + .filter-item {
|
||||||
|
margin-left: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
.filter-label {
|
.filter-label {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -352,7 +355,6 @@
|
|||||||
.btn-row {
|
.btn-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-top: 24rpx;
|
margin-top: 24rpx;
|
||||||
gap: 24rpx;
|
|
||||||
|
|
||||||
.reset-btn,
|
.reset-btn,
|
||||||
.search-btn {
|
.search-btn {
|
||||||
@@ -378,6 +380,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.search-btn {
|
.search-btn {
|
||||||
|
margin-left: 24rpx;
|
||||||
background: linear-gradient(135deg, #4D5DFA 0%, #6C7AFF 100%);
|
background: linear-gradient(135deg, #4D5DFA 0%, #6C7AFF 100%);
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
box-shadow: 0 8rpx 20rpx rgba(77, 93, 250, 0.25);
|
box-shadow: 0 8rpx 20rpx rgba(77, 93, 250, 0.25);
|
||||||
@@ -527,9 +530,11 @@
|
|||||||
padding: 16rpx 0 12rpx;
|
padding: 16rpx 0 12rpx;
|
||||||
|
|
||||||
.filter-row {
|
.filter-row {
|
||||||
gap: 12rpx;
|
|
||||||
|
|
||||||
.filter-item {
|
.filter-item {
|
||||||
|
& + .filter-item {
|
||||||
|
margin-left: 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
.filter-label {
|
.filter-label {
|
||||||
padding: 12rpx 16rpx;
|
padding: 12rpx 16rpx;
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
|
|||||||
@@ -1,17 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="setting-container">
|
<view class="setting-container">
|
||||||
<!-- <view class="status_bar"></view> -->
|
|
||||||
<!-- 顶部导航栏 -->
|
|
||||||
<!-- <view class="nav-bar">
|
|
||||||
<view class="nav-left" @tap="goBack">
|
|
||||||
<uni-icons type="left" size="22" color="#000"></uni-icons>
|
|
||||||
</view>
|
|
||||||
<view class="nav-title">设置</view>
|
|
||||||
<view class="nav-right"></view>
|
|
||||||
</view> -->
|
|
||||||
|
|
||||||
<!-- 内容区域 -->
|
<!-- 内容区域 -->
|
||||||
<scroll-view class="content" scroll-y="true">
|
<view class="content">
|
||||||
<!-- 手机号设置项 -->
|
<!-- 手机号设置项 -->
|
||||||
<view class="setting-item" @tap="goToChangePhone">
|
<view class="setting-item" @tap="goToChangePhone">
|
||||||
<view class="item-label">手机号</view>
|
<view class="item-label">手机号</view>
|
||||||
@@ -31,9 +22,12 @@
|
|||||||
<!-- <view class="item-value">{{ }}</view> -->
|
<!-- <view class="item-value">{{ }}</view> -->
|
||||||
<uni-icons type="arrowright" size="20" color="#ccc"></uni-icons>
|
<uni-icons type="arrowright" size="20" color="#ccc"></uni-icons>
|
||||||
</view>
|
</view>
|
||||||
</scroll-view>
|
</view>
|
||||||
|
|
||||||
<!-- 退出登录按钮 -->
|
<!-- 底部占位,避免内容被固定按钮遮挡 -->
|
||||||
|
<view class="placeholder"></view>
|
||||||
|
|
||||||
|
<!-- 退出登录按钮(固定底部) -->
|
||||||
<view class="logout-btn-wrap">
|
<view class="logout-btn-wrap">
|
||||||
<button class="logout-btn" @tap="handleLogout">退出登录</button>
|
<button class="logout-btn" @tap="handleLogout">退出登录</button>
|
||||||
</view>
|
</view>
|
||||||
@@ -144,52 +138,19 @@ const confirmLogout = () => {
|
|||||||
.setting-container {
|
.setting-container {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
display: flex;
|
box-sizing: border-box;
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
.status_bar {
|
|
||||||
width: 100%;
|
|
||||||
height: 46px;
|
|
||||||
}
|
|
||||||
/* 导航栏样式 */
|
|
||||||
.nav-bar {
|
|
||||||
height: 44px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0 15px;
|
|
||||||
border-bottom: 1px solid #f0f0f0;
|
|
||||||
background-color: #fff;
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
z-index: 99;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-left {
|
|
||||||
width: 40px;
|
|
||||||
height: 44px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-title {
|
|
||||||
flex: 1;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 32rpx;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-right {
|
|
||||||
width: 40px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 内容区域 */
|
/* 内容区域 */
|
||||||
.content {
|
.content {
|
||||||
flex: 1;
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 底部占位,高度与固定按钮区一致 */
|
||||||
|
.placeholder {
|
||||||
|
height: 104px;
|
||||||
|
}
|
||||||
|
|
||||||
/* 设置项样式 */
|
/* 设置项样式 */
|
||||||
.setting-item {
|
.setting-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -218,7 +179,12 @@ const confirmLogout = () => {
|
|||||||
|
|
||||||
/* 退出登录按钮 */
|
/* 退出登录按钮 */
|
||||||
.logout-btn-wrap {
|
.logout-btn-wrap {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
padding: 30px 15px;
|
padding: 30px 15px;
|
||||||
|
background-color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logout-btn {
|
.logout-btn {
|
||||||
|
|||||||
@@ -313,7 +313,6 @@ onShow(() => {
|
|||||||
.rate-row {
|
.rate-row {
|
||||||
margin-top: 20rpx;
|
margin-top: 20rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 30rpx;
|
|
||||||
.rate-item {
|
.rate-item {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
border-radius: 8rpx;
|
border-radius: 8rpx;
|
||||||
@@ -324,6 +323,9 @@ onShow(() => {
|
|||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
}
|
}
|
||||||
|
.rate-item + .rate-item {
|
||||||
|
margin-left: 30rpx;
|
||||||
|
}
|
||||||
.rate-occupy {
|
.rate-occupy {
|
||||||
background-image: url('https://wuye.ckdzkj.com/images/imgs/rate-occupy.png');
|
background-image: url('https://wuye.ckdzkj.com/images/imgs/rate-occupy.png');
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user