style(about): 调整招聘组件样式和响应式布局

- 统一导入语句格式，添加空格-优化职位卡片在不同屏幕尺寸下的宽度表现
- 调整标题文字大小以适配小屏幕设备
- 修改内边距数值使移动端显示更紧凑
- 增加岗位要求文本的行数限制选项- 更新“了解更多”按钮的上边距适应移动视图-重新排列招聘信息列表的弹性盒子方向
- 设置最大宽度容器提升整体页面美观度
- 新增工具函数用于移除HTML标签内容

src/components/about/Recruitment.tsx

@@ -8,17 +8,18 @@ interface JobCardProps {
   positions: number
   requirements: string
 }
-function Recruitment({list}:{list:RecruitmentInfo[]}) {
+
+function Recruitment({ list }: { list: RecruitmentInfo[] }) {
   function JobCard({ id, title, location, positions, requirements }: JobCardProps) {
     return (
-      <div className="w-80 bg-[url('/assets/about/21.png')] bg-[length:103%_100%] bg-no-repeat rounded-2xl border border-blue-200 overflow-hidden shadow-sm hover:shadow-md transition-shadow">
+      <div className="w-full sm:w-80 bg-[url('/assets/about/21.png')] bg-[length:103%_100%] bg-no-repeat rounded-2xl border border-blue-200 overflow-hidden shadow-sm hover:shadow-md transition-shadow">
         {/* Header */}
         <div className="bg-blue-500 text-white px-6 py-4 rounded-t-2xl">
-          <h3 className="text-lg font-medium">{title}</h3>
+          <h3 className="text-base sm:text-lg font-medium">{title}</h3>
         </div>
 
         {/* Content */}
-        <div className="p-6 space-y-4">
+        <div className="p-4 sm:p-6 space-y-4">
           {/* Work Location */}
           <div className="flex items-start gap-3">
             <div className="w-2 h-2 bg-blue-400 rounded-full mt-2 flex-shrink-0"></div>
@@ -42,18 +43,19 @@ function Recruitment({list}:{list:RecruitmentInfo[]}) {
             <div className="w-2 h-2 bg-blue-400 rounded-full mt-2 flex-shrink-0"></div>
             <div>
               <span className="text-gray-700 font-medium">岗位要求：</span>
-              <p className="text-gray-600 mt-1 leading-relaxed line-clamp-1">{requirements}</p>
+              <p className="text-gray-600 mt-1 leading-relaxed line-clamp-2 sm:line-clamp-1">
+                {requirements}
+              </p>
             </div>
           </div>
 
           {/* Learn More Button */}
-          <div className="pt-4">
+          <div className="pt-2 sm:pt-4">
             <Link href={`/about/recruitList/${id}`}>
-              <button
-                className="flex items-center gap-2 text-orange-500 hover:text-orange-600 transition-colors cursor-pointer">
+              <button className="flex items-center gap-2 text-orange-500 hover:text-orange-600 transition-colors cursor-pointer">
                 <span className="font-medium">了解更多</span>
                 <div className="w-6 h-6 bg-orange-500 rounded-full flex items-center justify-center">
-                  <ChevronRight className="w-3 h-3 text-white"/>
+                  <ChevronRight className="w-3 h-3 text-white" />
                 </div>
               </button>
             </Link>
@@ -64,40 +66,37 @@ function Recruitment({list}:{list:RecruitmentInfo[]}) {
   }
 
   return (
-    <>
-      <div className="max-w-4/5 mx-auto py-8">
-        <div className="px-4">
-          <div className="flex justify-around gap-12">
-            {list && list.length > 0 ? (
-              list.map((job) => (
-                <JobCard
-                  key={job.id}
-                  title={job.jobOpenings}
-                  location={job.workLocation}
-                  positions={job.numberRecruits}
-                  requirements={job.jobRequirements}
-                  id={job.id}
-                />
-              ))
-            ) : (
-              <p className="text-gray-500">暂无招聘信息</p>
-            )}
-          </div>
+    <div className="max-w-6xl mx-auto py-8">
+      <div className="px-2 sm:px-4">
+        <div className="flex flex-col sm:flex-row flex-wrap justify-center gap-6 sm:gap-12">
+          {list && list.length > 0 ? (
+            list.map((job) => (
+              <JobCard
+                key={job.id}
+                title={job.jobOpenings}
+                location={job.workLocation}
+                positions={job.numberRecruits}
+                requirements={job.jobRequirements}
+                id={job.id}
+              />
+            ))
+          ) : (
+            <p className="text-gray-500">暂无招聘信息</p>
+          )}
+        </div>
 
-          {/* More Positions Button */}
-          <div className="flex justify-center mt-8">
-            <Link href={'/about/recruitList'} className="font-medium">
-            <button
-              className="flex items-center gap-2 px-6 py-3 bg-white border border-blue-300 rounded-lg text-blue-600 hover:bg-blue-50 transition-colors cursor-pointer">
+        {/* More Positions Button */}
+        <div className="flex justify-center mt-8">
+          <Link href={'/about/recruitList'} className="font-medium">
+            <button className="flex items-center gap-2 px-6 py-3 bg-white border border-blue-300 rounded-lg text-blue-600 hover:bg-blue-50 transition-colors cursor-pointer">
               更多岗位
-              <ChevronRight className="w-4 h-4"/>
+              <ChevronRight className="w-4 h-4" />
             </button>
-            </Link>
-          </div>
+          </Link>
         </div>
       </div>
-    </>
+    </div>
   );
 }
 
-export default Recruitment;
+export default Recruitment;

src/utils/removeHTMLTags.ts

@@ -0,0 +1,4 @@
+export function removeHTMLTags(htmlString:string| null| undefined) {
+  if (!htmlString) return '';
+  return htmlString?.replace(/<[^>]*>/g, '') || '';
+}