练习H5改成小程序

common/styles/global/pages.scss

@@ -130,7 +130,8 @@
 	// 只有tabbar
 	.admin-phone-tabbar-view {height: calc(100vh - 208rpx - var(--status-bar-height));}
 
-
+	// 带滚动条
+	.phone-scroll-overflow{overflow-y: auto;}
 	// 带上边线的
 	.scroll-top-border{border-top: 1rpx solid #f4f6fa;}
 	.admin-list-box{
@@ -165,8 +166,8 @@
 		.phone-cishu-icon{background-image: url("@/static/images/common/cishu-icon.png");}
 		.phone-user-icon{background-image: url("@/static/images/common/user-icon.png");}
 		.phone-tel-icon{background-image: url("@/static/images/common/tel-icon.png");}
-		.phone-zongfen-icon{background-image: url("@/static/images/common/zongfen-icon.png");vertical-align: unset;}
-		.phone-jigefen-icon{background-image: url("@/static/images/common/jigefen-icon.png");vertical-align: unset;}
+		.phone-zongfen-icon{vertical-align: unset;}
+		.phone-jigefen-icon{vertical-align: unset;}
 		.phone-defen-icon{background-image: url("@/static/images/common/defen-icon.png");vertical-align: unset;}
 		.ks-score-content{
 			width: 100%;font-size: 26rpx;margin-bottom: 20rpx;line-height: 1;

pages/client/Lianxi/list.vue

@@ -4,9 +4,9 @@
 		<!-- 考试列表 -->
 		<scroll-view scroll-y="true" refresher-enabled="true" :refresher-triggered="data.loading"
 			:refresher-threshold="50" refresher-background="transparent" @refresherrefresh="onRefresh" @scrolltolower="onScrolltolower"
-			class="phone-scroll-view">
+			:style="{ height: `calc(100vh - ${statusBarHeight}px - 212rpx);`}" class="phone-scroll-overflow">
 			<uni-list class="admin-list-box">
-				<uni-list-item v-for="item in data.list" class="admin-list-item-box">
+				<uni-list-item v-for="item in data.list" class="admin-list-item-box" >
 					<template v-slot:body style="width: 100%;">
 						<!-- 考试项 -->
 						<view class="item-card-row">
@@ -22,10 +22,12 @@
 							<!-- 分数 -->
 							<view class="ks-score-content">
 								<view class="ks-score">
-									<icon class="phone-zongfen-icon" />总分：<text>{{item.ksScore}}</text>
+									<icon class="phone-zongfen-icon" :style="{ backgroundImage: 'url(' + data.imgsArr.phoneZongfenIcon + ')' }"/>
+									总分：<text>{{item.ksScore}}</text>
 								</view>
 								<view class="ks-okScore">
-									<icon class="phone-jigefen-icon" />及格分：<text>{{item.okScore}}</text>
+									<icon class="phone-jigefen-icon" :style="{ backgroundImage: 'url(' + data.imgsArr.phoneJigefenIcon + ')' }"/>
+									及格分：<text>{{item.okScore}}</text>
 								</view>
 							</view>
 							<button type="primary" size="mini" @click="checkKsXz(item)"
@@ -44,21 +46,19 @@
 </template>
 
 <script setup>
+	import cacheManager from '@/utils/cacheManager.js';
 	import customNavbarVue from "@/components/custom-navbar/custom-navbar.vue";
 	import * as lianxiApi from "@/api/lianxi.js";
 	import customTabbarClientVue from "@/components/custom-tabbar/custom-tabbar-client.vue";
 	import lianxixuzhi from "@/components/kaoshixuzhi/lianxixuzhi.vue";
-	import {
-		ref,
-		reactive
-	} from "vue";
+	import {ref,onMounted,reactive} from "vue";
 	import {
 		onLoad,
 		onShow
 	} from "@dcloudio/uni-app";
 
 	const lxxzRef = ref(null);
-
+	const statusBarHeight = ref(0);
 	const data = reactive({
 		zyName: '', // 职业名称
 		list: [], // 考试列表
@@ -71,7 +71,11 @@
 			contentrefresh: '加载中',
 			contentnomore: '没有更多'
 		},
-		from: ''
+		from: '',
+		imgsArr: {
+			phoneZongfenIcon: '',
+			phoneJigefenIcon: '',
+		},
 	})
 
 	function onScrolltolower() {
@@ -176,8 +180,18 @@
 
 	onLoad((options) => {
 		data.from = options.from;
+		data.imgsArr.phoneZongfenIcon = cacheManager.get('projectImg').zongfen_icon;
+		data.imgsArr.phoneJigefenIcon = cacheManager.get('projectImg').jigefen_icon;
+		console.log(data,'data');
 	})
 
+	onMounted(() => {
+		uni.getSystemInfo({
+		success: (res) => {
+		statusBarHeight.value = res.statusBarHeight;
+		}
+		});
+	});
 	onShow(() => {
 		getMore()
 	})