ソースを参照

feat(subpack): 优化申请详情和个人信息页面样式

- 新增文本溢出样式类,用于限制文本显示行数
- 重构申请详情页面布局,添加底部导航栏
- 更新个人信息页面样式,调整头像和姓名显示
- 优化步骤条组件样式,调整线条和文字样式
lzm 4 ヶ月 前
コミット
feaa08c2a5

+ 50 - 1
common/css/common.css

@@ -1583,4 +1583,53 @@
 
 .main-bg-color {
 	background-color: #08C060;
-}
+}
+
+
+.text-overflow {
+    width: 100%;
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.text-overflow-1 {
+    width: 100%;
+    display: -webkit-box;
+    white-space: inherit;
+    overflow: hidden;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+}
+
+.text-overflow-2 {
+    width: 100%;
+    display: -webkit-box;
+    white-space: inherit;
+    overflow: hidden;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+}
+
+.text-overflow-3 {
+    width: 100%;
+    display: -webkit-box;
+    white-space: inherit;
+    overflow: hidden;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+}
+
+.text-overflow-4 {
+    width: 100%;
+    display: -webkit-box;
+    white-space: inherit;
+    overflow: hidden;
+    -webkit-line-clamp: 4;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+}

+ 80 - 12
pages/subpack/pages/application/info.vue

@@ -1,25 +1,93 @@
 <template>
 	<view>
-		<u-navbar class="u-navbar-box" title="申请详情" placeholder bgColor="transparent" autoBack />
+		<u-navbar class="u-navbar-box" :title="handleTitle" placeholder bgColor="transparent" autoBack />
+		<!-- 小程序不支持动态表单 -->
+		<!-- <view>
+			<component :is="currentComponent"></component>
+		</view> -->
+		<!-- 加载组件 -->
+		<view>
+			<Page1 v-show="tabbarIndex === 0" />
+			<Page2 v-show="tabbarIndex === 1" />
+			<Page3 v-show="tabbarIndex === 2" />
+		</view>
+		<up-tabbar :value="tabbarIndex" @change="tabbarChange" fixed placeholder safeAreaInsetBottom>
+			<up-tabbar-item text="特困审批" icon="home" />
+			<up-tabbar-item text="基本信息" icon="home" />
+			<up-tabbar-item text="申请进度" icon="home" />
+		</up-tabbar>
 	</view>
 </template>
 
 <script setup>
-	
-</script>
+	import {
+		reactive,
+		ref,
+		computed
+	} from 'vue';
+	import Page1 from './componenets/page1.vue';
+	import Page2 from './componenets/page2.vue';
+	import Page3 from './componenets/page3.vue';
+	// 假设 Page1 和 Page2 已经通过某种方式导入或全局注册
+	// const components = ref([Page1, Page2);
+	// 计算属性来确定要渲染的组件名称
+	// const pages = [Page1, Page2, Page3];
+	// const currentComponent = computed(() => pages[tabbarIndex.value]);
+	//tabbar 
+	const tabbarIndex = ref(0);
 
-<style lang="scss" scoped>
+	function tabbarChange(index) {
+		if (index === tabbarIndex) return;
+		tabbarIndex.value = index;
+	}
+	const handleTitle = computed(() => {
+		if (tabbarIndex.value === 0) return '特困审批';
+		else if (tabbarIndex.value === 1) return '基本信息';
+		else return '申请进度';
+	})
+</script>
+<style>
 	page {
 		background-color: #F6F8FD;
 	}
-
-	:deep(.u-navbar__content__title) {
-		font-weight: bold;
-		font-size: 36rpx;
-		color: #222222;
-	}
-
+</style>
+<style lang="scss" scoped>
+	::v-deep{
+		.u-navbar__content__title{
+			font-weight: bold;
+			font-size: 36rpx;
+			color: #222222;
+		}
+		.u-navbar__content{
+			background: radial-gradient(circle at left, #FFE5E4 0%, #EEF2F5 40%, #DBEEFB 100%);
+		}
+		.u-textarea{
+			background-color: rgba(245, 248, 252, 1) !important;
+			border: none;
+		}
+		.u-textarea__count{
+			background-color: transparent !important;
+		}
+		.u-steps-item{
+			padding-bottom: 50rpx;
+		}
+		.u-steps-item__line {
+			background: repeating-linear-gradient(to bottom,
+					#207DFF 0,
+					#207DFF 2rpx,
+					transparent 4rpx,
+					transparent 8rpx) !important;
+		}
+		.u-steps-item__content {
+			margin-top: 0 !important;
+			margin-left: 30rpx !important;
+			.u-text__value{
+				font-size: 32rpx !important;
+				color: #222222 !important;
+			}
+		}
+	} 
 	.u-navbar-box {
 		background: radial-gradient(circle at left, #FFE5E4 0%, #EEF2F5 40%, #DBEEFB 100%);
 	}
-</style>
+</style>

+ 3 - 3
pages/subpack/pages/myInfo/info.vue

@@ -1,15 +1,15 @@
 <template>
 	<view>
 		<u-navbar class="u-navbar-box" title="个人信息" placeholder bgColor="transparent" autoBack />
-		<u-cell-group :border="false" :customStyle="{background: '#fff', margin: '30rpx', borderRadius: '20rpx'}">
+		<u-cell-group :border="false" :customStyle="{background: '#fff', margin: '30rpx',  borderRadius: '20rpx'}">
 			<u-cell title="头像" isLink>
 				<template #value>
-					<u-image src="/static/mine/task.png" bgColor="transparent" width="36rpx" height="36rpx" />
+					<u-image src="/static/mine/task.png" bgColor="transparent" width="60rpx" height="60rpx" />
 				</template>
 			</u-cell>
 			<u-cell title="姓名" isLink :border="false">
 				<template #value>
-					<u-image src="/static/mine/myself.png" bgColor="transparent" width="36rpx" height="36rpx" />
+					<view>张大浪</view>
 				</template>
 			</u-cell>
 		</u-cell-group>

+ 2 - 1
uni_modules/uview-plus/components/u-steps-item/u-steps-item.vue

@@ -108,7 +108,8 @@
 					style.width = this.size.width + 'px'
 					style.left = this.size.width / 2 + 'px'
 				} else {
-					style.height = this.size.height + 'px'
+					style.height = '100%';
+					// style.height = this.size.height + 'px'
 					// style.top = this.size.height / 2 + 'px'
 				}
 				style.backgroundColor = this.parent.children?.[this.index + 1]?.error ? color.error : this.index <