perf: 首页 手机端兼容优化

src/views/dashboard/index.vue

@@ -3,26 +3,28 @@
 		<el-row :gutter="24">
       <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
         <el-card class="info-wrap">
-			<img class="logo" src="@/assets/images/logo.png" />
-			<div class="desc-wrap">
-				<div class="header">早安，Admin， 开始您一天的工作吧</div>
-				<div class="tip">今日阴转大雨，15℃ - 25℃，出门记得带伞哦.</div>
-			</div>
-			<div class="extra-items">
-				<div class="item">
-					<div class="label">项目数</div>
-					<div class="value">16</div>
-				</div>
-				<div class="item">
-					<div class="label">待办</div>
-					<div class="value">3/15</div>
-				</div>
-				<div class="item">
-					<div class="label">消息</div>
-					<div class="value">36</div>
-				</div>
-			</div>
-		</el-card>
+					<div class="desc-box pc:flex-1">
+						<img class="logo" src="@/assets/images/logo.png" />
+						<div class="desc-wrap pc:min-w-[300px]">
+							<div class="header">早安，Admin， 开始您一天的工作吧</div>
+							<div class="tip">今日阴转大雨，15℃ - 25℃，出门记得带伞哦.</div>
+						</div>
+					</div>
+					<div class="pc:flex-1 extra-items max-w-full">
+						<div class="item">
+							<div class="label">项目数</div>
+							<div class="value">16</div>
+						</div>
+						<div class="item">
+							<div class="label">待办</div>
+							<div class="value">3/15</div>
+						</div>
+						<div class="item">
+							<div class="label">消息</div>
+							<div class="value">36</div>
+						</div>
+					</div>
+				</el-card>
       </el-col>
     </el-row>
 
@@ -36,12 +38,12 @@
 						</div>
 					</template>
 					<el-row :gutter="10">
-						<el-col v-for="(v, i) of flowList" :key="i" :span="6">
+						<el-col v-for="(v, i) of flowList" :key="i" :span="12" :sm="8" :md="6">
 							<div class="link-item">
 								<svg-icon :icon-class="v.icon" class-name="icon" />
 								<div class="desc">
 									<div class="text-overflow_ellipsis">{{ v.label }}</div>
-									<div class="tip text-overflow_ellipsis">{{ v.label }}快捷入口</div>
+									<le-text class="tip" :value="`${ v.label }快捷入口`"></le-text>
 								</div>
 							</div>
 						</el-col>
@@ -505,12 +507,14 @@ const tableOpts = ref({
 	}
 }
 :deep(.info-wrap) {
-	min-height: 120px;
+	//min-height: 120px;
 	background: var(--el-bg-color) linear-gradient(120deg, var(--el-color-primary-light-9) 10%, var(--el-bg-color)) no-repeat;
 	.el-card__body {
 		display: flex;
 		align-items: center;
 		justify-content: center;
+		flex-wrap: wrap;
+		padding: 10px;
 	}
 	.header {
 		//font-size: var(--el-font-size-bigger);
@@ -523,17 +527,25 @@ const tableOpts = ref({
 		line-height: 25px;
 	}
 }
+.desc-box {
+	display: flex;
+	align-items: center;
+	padding: 10px;
+}
 .desc-wrap {
 	flex: auto;
-	width: calc(100% - 200px);
-	min-width: 300px;
+	//width: calc(100% - 200px);
+	//min-width: 300px;
 	font-size: 14px;
 }
 .extra-items {
 	display: flex;
 	align-items: center;
+	padding: 10px;
 	.item {
-		width: 160px;
+		flex: 1;
+		min-width: 160px;
+		//max-width: 30%;
 		color: var(--el-text-color-primary);
 		font-size: 14px;
 		.value {
@@ -577,9 +589,11 @@ const tableOpts = ref({
 		font-weight: 600;
 		.tip {
 			margin-top: 5px;
-			color: var(--el-text-color-regular);
-			font-size: 12px;
-			font-weight: normal;
+			:deep(.el-text) {
+				color: var(--el-text-color-regular);
+				font-size: 12px;
+				font-weight: normal;
+			}
 		}
 	}
 }
@@ -626,4 +640,23 @@ const tableOpts = ref({
   width: 100%;
   height: 100%;
 }
+
+// 手机端兼容
+.app-mobile {
+	.info-wrap {
+		:deep(.el-card__body) {
+			flex-direction: column;
+			align-items: flex-start;
+		}
+		.extra-items {
+			width: 100%;
+			.item {
+				min-width: unset;
+			}
+		}
+		.desc-wrap {
+			max-width: 100%;
+		}
+	}
+}
 </style>