style: 适配iphone5机型

Justin3go · Apr 15, 2023 · 6ee3160 · 6ee3160
1 parent 37a816c
commit 6ee3160
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 36 deletions.
diff --git a/src/components/commonCard.vue b/src/components/commonCard.vue
@@ -8,15 +8,6 @@
 		<slot>
 			<view class="actions">
 				<view class="btn-container">
-					<button
-						v-if="props.secondBtn"
-						style="width: 80px; height: 40px; line-height: 40px; background-color: #0256ff; color: #ffffff"
-						:open-type="props.secondBtnType"
-						:data-data="props.secondBtnData"
-						@click="secondBtnClick"
-					>
-						{{ props.secondBtnText }}
-					</button>
 					<button
 						style="
 							width: 80px;
@@ -31,6 +22,15 @@
 					>
 						{{ props.firstBtnText }}
 					</button>
+					<button
+						v-if="props.secondBtn"
+						style="width: 80px; height: 40px; line-height: 40px; background-color: #0256ff; color: #ffffff"
+						:open-type="props.secondBtnType"
+						:data-data="props.secondBtnData"
+						@click="secondBtnClick"
+					>
+						{{ props.secondBtnText }}
+					</button>
 				</view>
 			</view>
 		</slot>
@@ -64,8 +64,7 @@ const props = withDefaults(defineProps<propsI>(), {
 	secondBtnData: "",
 });
 const emit = defineEmits<emitI>();
-const btnContainerWidth = props.secondBtn ? "160px" : "80px";
-const btnContainerMarginLeft = props.secondBtn ? "60%" : "80%";
+const btnContainerWidth = props.secondBtn ? "170px" : "80px";
 
 function clickAction() {
 	emit("clickAction");
@@ -132,10 +131,12 @@ function secondBtnClick() {
 	}
 	.actions {
 		width: 100%;
+		display: flex;
+		direction: rtl;
 		.btn-container {
 			display: flex;
 			width: v-bind(btnContainerWidth);
-			margin: 20px 0 0 v-bind(btnContainerMarginLeft);
+			margin: 20px 0 0 0;
 		}
 	}
 }

diff --git a/src/components/quickEntryCard.vue b/src/components/quickEntryCard.vue
@@ -19,7 +19,7 @@ interface propsI {
 
 const props = withDefaults(defineProps<propsI>(), {
 	containerHeight: "80px",
-	containerWidth: "190px",
+	containerWidth: "48vw",
 });
 const height = props.containerHeight;
 const width = props.containerWidth;

diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
@@ -23,7 +23,7 @@
 			<view class="user-right">
 				<view class="questionnaire-container">
 					<view class="questionnaire-count">{{ questionnaireCount }}</view>
-					<view class="questionnaire-title">待填问卷</view>
+					<view class="questionnaire-title">待填</view>
 				</view>
 				<view class="share-container">
 					<view class="share-code">
@@ -148,6 +148,7 @@ function confirmNews() {
 }
 .user-container {
 	height: 80px;
+	width: calc(100vw - 20px);
 	display: flex;
 	padding: 10px;
 	justify-content: space-between;
@@ -157,15 +158,21 @@ function confirmNews() {
 		justify-content: space-around;
 		align-items: center;
 
+		width: calc(100% - 120px);
 		.info {
 			margin-left: 10px;
+			width: calc(100% - 70px);
 			.nick-name {
 				font-weight: 900;
 				font-size: 18px;
 				color: $theme-color-dark;
 			}
 
 			.id {
+				width: 100%;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
 				margin-top: 5px;
 				font-size: 12px;
 				color: $theme-color-gray;
@@ -174,6 +181,7 @@ function confirmNews() {
 	}
 
 	.user-right {
+		width: 120px;
 		font-size: 15px;
 		display: flex;
 		justify-content: space-around;

diff --git a/src/pages/me/index.vue b/src/pages/me/index.vue
@@ -23,19 +23,17 @@
 				<view class="info">
 					<image
 						class="avatar"
-						style="height: 90%; border-radius: 50%"
-						mode="heightFix"
+						style="height: 60px; width: 60px; border-radius: 50%"
 						:src="meStore.user?.avatarUrl || userDefaultData.avatarUrl"
 					></image>
 					<view class="text-info">
 						<view class="nick-name">{{ meStore.user?.nickName || userDefaultData.nickName }}</view>
-						<view class="id">id: {{ meStore.user?.id || userDefaultData.id }}</view>
+						<view class="id">{{ meStore.user?.id || userDefaultData.id }}</view>
 					</view>
 				</view>
 				<view class="icon" @click="toUpdateUser">
 					<uni-icons type="forward" size="30" color="#D3D3D3"></uni-icons>
 				</view>
-				<view class="update-user-entry"></view>
 			</view>
 			<view class="quick-entry">
 				<quick-entry-card>
@@ -161,7 +159,7 @@ async function login() {
 
 	// 登录后检测是否为分享链接进入，是则跳转问卷填写
 	const userId = meStore.user?.id;
-	const isNavigateTo =  params.curScene == 1 && userId !== params.ownerId;
+	const isNavigateTo = params.curScene == 1 && userId !== params.ownerId;
 	if (isNavigateTo) {
 		uni.navigateTo({
 			url: `/pages/questionnaire/write?questionnaireId=${params.questionnaireId}&ownerId=${params.ownerId}&friendId=${userId}`,
@@ -178,42 +176,44 @@ function toUpdateUser() {
 
 <style lang="scss" scoped>
 .top-card {
-	height: 35vh;
+	height: 300px;
 	width: 100vw;
 	overflow: hidden; // 形成BFC，使user-info中的margin-top生效
 	/* background-color: $theme-color-lighter-5; */
 	background: linear-gradient(to right, $theme-color-lighter-4, $theme-color-lighter-5);
-	border-radius: 20px;
+	border-radius: 0 0 20px 20px;
 
 	.user-info {
-		height: 27%;
-		width: 100%;
+		height: 90px;
+		width: calc(100% - 20px);
 		margin-top: 25%;
-		padding: 0 5%;
+		padding: 0 10px;
 		display: flex;
 		align-items: center;
+		justify-content: space-between;
 		.info {
 			height: 100%;
 			width: 80%;
 			display: flex;
 			align-items: center;
-			.nick-name {
-				font-weight: 900;
-				font-size: 18px;
-			}
-			.id {
-				margin-top: 5px;
-				font-size: 14px;
-				color: $theme-color-gray;
-			}
 			.text-info {
-				margin-left: 20px;
+				margin-left: 10px;
+				width: calc(100% - 70px);
+
+				.nick-name {
+					font-weight: 900;
+					font-size: 18px;
+				}
+				.id {
+					margin-top: 5px;
+					font-size: 12px;
+					color: $theme-color-gray;
+				}
 			}
 		}
 		.icon {
 			height: 30px;
 			width: 30px;
-			border-radius: 15px;
 		}
 	}
 
@@ -228,7 +228,7 @@ function toUpdateUser() {
 .service-card {
 	background-color: #ffffff;
 	width: calc(100vw - 40px);
-	height: 30vh;
+	height: 270px;
 	position: relative;
 	top: -20px;
 	z-index: -10;