feat(cankao): 参考页面PC端界面优化

src/views/pages/cankao/indexPC.vue

@@ -4,7 +4,7 @@
 
 		<div class="content">
 			<div class="top" @click="goBack">
-				<image src="@/assets/zixun/icon_fanhui.png" class="icon_back" />
+				<el-icon><ArrowLeft /></el-icon>
 				<text>返回列表</text>
 			</div>
 
@@ -58,6 +58,7 @@ import { onMounted, ref } from 'vue';
 import { fetchArticleDetail } from '/@/api/cankao';
 import { Session } from '/@/utils/storage';
 import { useRoute, useRouter } from 'vue-router';
+import { ArrowLeft } from '@element-plus/icons-vue';
 
 const router = useRouter();
 const route = useRoute();
@@ -106,10 +107,12 @@ onMounted(async () => {
 
 .content {
 	background-color: white;
-	width: 55vw;
+	width: 100%;
-	min-width: 1200px;
+	// min-width: 1200px;
 	min-height: 100vh;
-	padding: 20px 30px;
+	padding: 20px 120px;
+  background-color: #fff;
+	box-sizing: border-box;
 }
 
 .page_top {
@@ -183,6 +186,7 @@ onMounted(async () => {
 		text-align: left;
 		font-style: normal;
 		margin-left: 5px;
+		cursor: pointer;
 	}
 }
 
@@ -221,7 +225,7 @@ onMounted(async () => {
 }
 
 .abstract {
-	font-family: PingFangSC, PingFang SC;
+	font-family: "Microsoft YaHei", "PingFangSC", "PingFang SC";
 	font-weight: 400;
 	font-size: 16px;
 	color: #666666;
@@ -277,10 +281,10 @@ onMounted(async () => {
 }
 
 .text {
-	font-family: PingFangSC, PingFang SC;
+	font-family: "Microsoft YaHei", "PingFangSC", "PingFang SC";
 	font-weight: 400;
 	font-size: 16px;
-	color: #1a1a1a;
+	color: #333;
 	line-height: 28px;
 	text-align: left;
 	font-style: normal;

src/views/pages/cankao/rank.vue

@@ -4,7 +4,7 @@
 
 		<div class="content">
 			<div class="top_title">
-				<text class="pageTitle">编辑精选</text>
+				<text class="pageTitle">编辑<text class="strong">精选</text></text>
 
 				<div class="r_input">
 					<input
@@ -37,15 +37,18 @@
 				</div>
 			</div>
 
-			<div style="width: 100%; display: flex; justify-content: center" v-if="newsList && newsList.length > 0">
+			<div class="pagination" style="width: 100%; display: flex; justify-content: flex-end" v-if="newsList && newsList.length > 0">
 				<el-pagination
+					popper-class="popper-style"
+					background
 					v-model:current-page="currentPage"
 					:page-size="form.size"
-					layout="prev, pager, next"
+					layout="total, sizes, prev, pager, next, jumper"
 					:total="form.total"
 					@current-change="currentChange"
 					@size-change="sizeChange"
-				/>
+				>
+				</el-pagination>
 			</div>
 		</div>
 	</div>
@@ -125,6 +128,13 @@ function currentChange(page) {
 	getNewsList();
 }
 
+function sizeChange(size) {
+	form.page = 1;
+	currentPage.value = 1;
+	form.size = size;
+	getNewsList();
+}
+
 onMounted(async (e) => {
 	console.log('🚀 ~ route.query:', route.query);
 
@@ -222,6 +232,10 @@ const handlePopupErrorCallback = () => {
 		font-size: 26px;
 		color: #1a1a1a;
 		font-weight: bold;
+
+		.strong {
+			color: #ff9900;
+		}
 	}
 
 	.title_icon {
@@ -307,7 +321,7 @@ const handlePopupErrorCallback = () => {
 	}
 
 	.item_title:hover {
-		color: #057cff;
+		color: #ff9900;
 	}
 
 	.item_title {
@@ -319,7 +333,7 @@ const handlePopupErrorCallback = () => {
 	}
 
 	.item_summary {
-		font-family: PingFangSC, PingFang SC;
+		font-family: 'Microsoft YaHei', 'PingFangSC', 'PingFang SC';
 		font-weight: normal;
 		font-size: 16px;
 		color: #333333;
@@ -402,7 +416,7 @@ const handlePopupErrorCallback = () => {
 	gap: 10px;
 	flex-shrink: 0;
 	border-radius: 0 10px 10px 0;
-	background: #007aff;
+	background: #ff9900;
 
 	color: white;
 	font-family: PingFangSC, PingFang SC;
@@ -426,8 +440,8 @@ const handlePopupErrorCallback = () => {
 	margin-left: 30px;
 	margin-top: 3px;
 
-	:deep(.el-input__inner::placeholder) {
+	:deep(.input::placeholder) {
-		color: #ccced3;
+		color: #ccc;
 		font-family: 'PingFang SC';
 		font-size: 16px;
 		font-style: normal;
@@ -439,4 +453,20 @@ const handlePopupErrorCallback = () => {
 		box-shadow: 0 0 0 #fff;
 	}
 }
+.pagination {
+	margin-top: 24px;
+	width: 100%;
+	display: flex;
+	text-align: center;
+	justify-content: center;
+	align-items: center;
+	// :deep(.el-pager li){
+	//   border: 1px solid #ccc;
+	//   background: transparent;
+	// }
+}
+
+:deep(.el-select-dropdown__item.is-selected) {
+	color: #ff9900;
+}
 </style>