flat: 暂存

packageA/pages/post/component/radarMap.vue

@@ -0,0 +1,167 @@
+<template>
+    <view style="display: flex; justify-content: center; padding: 0px 0">
+        <canvas canvas-id="radarCanvas" id="radarCanvas" style="width: 300px; height: 250px"></canvas>
+    </view>
+</template>
+
+<script setup>
+import { reactive, inject, watch, ref, onMounted, computed } from 'vue';
+import { onLoad, onShow } from '@dcloudio/uni-app';
+// const src = ref('');
+
+const props = defineProps({
+    value: {
+        type: Object,
+        default: () => ({}),
+    },
+});
+
+// 监听页面初始化
+onMounted(() => {
+    if (Object.keys(props.value).length > 0) {
+        rawRadarChart();
+    }
+});
+
+// 监听 props.value 变化
+watch(
+    () => props.value,
+    (newVal) => {
+        if (newVal && Object.keys(newVal).length > 0) {
+            const { skill, experience, education, salary, age, location } = newVal.radarChart;
+            const labels = ['学历', '年龄', '工作地', '技能', '工作经验', '期望薪资'];
+            const data = [education, age, location, skill, experience, salary].map((item) => item * 0.05);
+            rawRadarChart(labels, data);
+        }
+    },
+    { deep: true, immediate: false } // deep 递归监听对象内部变化
+);
+
+function rawRadarChart(labels, data) {
+    const ctx = uni.createCanvasContext('radarCanvas');
+    const width = 80;
+    const height = 80;
+    const centerX = 150;
+    const centerY = 125;
+    // const data = [2, 3.5, 5, 3.5, 5, 3.5]; // 示例数据
+    // const labels = ['火烧', '泡水', '事故', '外观', '部件', '火烧'];
+    const colors = ['#F5F5F5', '#F5F5F5', '#F5F5F5', '#F5F5F5', '#F5F5F5'];
+    const maxScore = 5; // 数据最大值
+
+    const angleStep = (2 * Math.PI) / labels.length;
+
+    // 绘制背景多边形
+    ctx.setLineWidth(1);
+    ctx.setStrokeStyle('#F6F6F6');
+
+    //底部圆盘
+    ctx.beginPath();
+    ctx.arc(centerX, centerY, width, 0, 2 * Math.PI);
+    ctx.setFillStyle('#FFFFFF');
+    ctx.closePath();
+    ctx.fill();
+
+    //多边形圈
+    // 多边形圈
+    for (let i = 5; i > 0; i--) {
+        ctx.setStrokeStyle(colors[i - 1]); // 设置边框颜色
+        ctx.beginPath();
+        labels.forEach((label, index) => {
+            const x = centerX + (width / 5) * i * Math.cos(angleStep * index - Math.PI / 2);
+            const y = centerY + (height / 5) * i * Math.sin(angleStep * index - Math.PI / 2);
+            if (index === 0) {
+                ctx.moveTo(x, y);
+            } else {
+                ctx.lineTo(x, y);
+            }
+        });
+        ctx.closePath();
+        ctx.stroke(); // 只描边，不填充
+    }
+
+    // //竖线
+    labels.forEach((label, index) => {
+        ctx.setStrokeStyle('#F5F5F5');
+        ctx.setFillStyle('#F5F5F5');
+        ctx.beginPath();
+
+        const x1 = centerX + width * 0.6 * Math.sin(angleStep * index);
+        const y1 = centerY + height * 0.6 * Math.cos(angleStep * index);
+        const x = centerX + width * Math.sin(angleStep * index);
+        const y = centerY + height * Math.cos(angleStep * index);
+
+        ctx.moveTo(x1, y1);
+        ctx.lineTo(x, y);
+
+        ctx.closePath();
+        ctx.stroke();
+    });
+
+    // 绘制雷达图数据
+    ctx.setStrokeStyle('#256BFA');
+    ctx.setFillStyle('rgba(37,107,250, 0.24)');
+    ctx.setLineWidth(2);
+    ctx.beginPath();
+    const pointList = []; // 记录每个点的位置，等会画小圆点
+    data.forEach((score, index) => {
+        const x = centerX + width * (score / maxScore) * Math.cos(angleStep * index - Math.PI / 2);
+        const y = centerY + height * (score / maxScore) * Math.sin(angleStep * index - Math.PI / 2);
+        pointList.push({ x, y }); // 保存位置
+        if (index === 0) {
+            ctx.moveTo(x, y);
+        } else {
+            ctx.lineTo(x, y);
+        }
+    });
+    ctx.closePath();
+    ctx.fill();
+    ctx.stroke();
+
+    // 绘制每个小圆点
+    ctx.setFillStyle('#256BFA'); // 小圆点颜色（你可以改）
+    pointList.forEach((point) => {
+        ctx.beginPath();
+        ctx.arc(point.x, point.y, 4, 0, 2 * Math.PI); // 半径 4，可以自己调大小
+        ctx.fill();
+    });
+
+    // 绘制标签
+    ctx.setTextAlign('center');
+
+    labels.forEach((label, index) => {
+        const x = centerX + (width + 30) * Math.cos(angleStep * index - Math.PI / 2);
+        const y = centerY + (height + 26) * Math.sin(angleStep * index - Math.PI / 2);
+
+        //标题
+        ctx.setFillStyle('#000');
+        ctx.setFontSize(12);
+        ctx.font = 'bold 12px sans-serif';
+        ctx.fillText(label, x, y);
+
+        // ctx.setFillStyle('#A2A4A2');
+        // ctx.font = '12px sans-serif';
+        // ctx.setFontSize(12);
+        // ctx.fillText(data[index], x, y + 16);
+    });
+
+    ctx.draw();
+
+    //转图片
+
+    // uni.canvasToTempFilePath({
+    //     x: 0,
+    //     y: 0,
+    //     width: 320,
+    //     height: 320,
+    //     destWidth: 840,
+    //     destHeight: 840,
+    //     canvasId: 'radarCanvas',
+    //     success: (res) => {
+    //         // 在H5平台下，tempFilePath 为 base64
+    //         src = res.tempFilePath;
+    //     },
+    // });
+}
+</script>
+
+<style></style>

packageA/pages/post/component/videoPlayer.vue

@@ -0,0 +1,158 @@
+<template>
+    <!-- 小窗播放容器 -->
+    <view
+        v-if="visible"
+        class="mini-player"
+        :style="{
+            left: position.x + 'px',
+            top: position.y + 'px',
+            width: isFullScreen ? '100%' : '300rpx',
+            height: isFullScreen ? '100vh' : '200rpx',
+        }"
+        @touchstart="handleTouchStart"
+        @touchmove="handleTouchMove"
+        @touchend="handleTouchEnd"
+        @touchmove.stop.prevent
+    >
+        <!-- 视频组件 -->
+        <video
+            :src="videoUrl"
+            :controls="true"
+            :show-progress="isFullScreen"
+            :style="{
+                width: '100%',
+                height: '100%',
+            }"
+            id="myVideo"
+            @play="onPlay"
+            @pause="onPause"
+        ></video>
+
+        <!-- 控制栏 -->
+        <view class="controls">
+            <!--   <text @click="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</text>
+            <text @click="toggleFullScreen">{{ isFullScreen ? '退出全屏' : '全屏' }}</text> -->
+            <text @click="close">关闭</text>
+        </view>
+    </view>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
+import { nextTick } from 'vue';
+
+const visible = ref(false);
+const isPlaying = ref(false);
+const isFullScreen = ref(false);
+const videoUrl = ref('');
+const position = reactive({ x: 20, y: 100 });
+const videoContext = ref(null);
+const startPos = reactive({ x: 0, y: 0 });
+const moving = ref(false);
+
+// 初始化视频上下文
+onMounted(() => {
+    videoContext.value = uni.createVideoContext('myVideo');
+});
+
+// 触摸开始
+const handleTouchStart = (e) => {
+    if (isFullScreen.value) return;
+    startPos.x = e.touches[0].clientX - position.x;
+    startPos.y = e.touches[0].clientY - position.y;
+    moving.value = true;
+};
+
+// 触摸移动
+const handleTouchMove = (e) => {
+    if (!moving.value || isFullScreen.value) return;
+
+    const newX = e.touches[0].clientX - startPos.x;
+    const newY = e.touches[0].clientY - startPos.y;
+
+    // 边界检测
+    const maxX = window.innerWidth - 150; // 300rpx换算后的值
+    const maxY = 50 + window.innerHeight - 200;
+
+    position.x = Math.max(0, Math.min(newX, maxX));
+    position.y = Math.max(0, Math.min(newY, maxY));
+};
+
+// 触摸结束
+const handleTouchEnd = () => {
+    moving.value = false;
+};
+
+// 播放状态变化
+const onPlay = () => {
+    isPlaying.value = true;
+};
+
+const onPause = () => {
+    isPlaying.value = false;
+};
+
+// 切换播放状态
+const togglePlay = () => {
+    isPlaying.value ? videoContext.value.pause() : videoContext.value.play();
+};
+
+// 切换全屏
+const toggleFullScreen = () => {
+    isFullScreen.value = !isFullScreen.value;
+    if (!isFullScreen.value) {
+        // 退出全屏时恢复原位
+        position.x = 20;
+        position.y = 100;
+    }
+};
+
+// 关闭播放器
+const close = () => {
+    visible.value = false;
+    videoContext.value.stop();
+    isPlaying.value = false;
+    isFullScreen.value = false;
+};
+
+// 打开播放器方法
+const open = (url) => {
+    videoUrl.value = url;
+    visible.value = true;
+    nextTick(() => {
+        videoContext.value.play();
+    });
+};
+
+// 暴露方法
+defineExpose({ open });
+</script>
+
+<style scoped>
+.mini-player {
+    position: fixed;
+    z-index: 999;
+    background: #000;
+    border-radius: 8rpx;
+    overflow: hidden;
+    box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.3);
+}
+
+.controls {
+    position: absolute;
+    top: 0;
+    right: 0;
+    /* background: rgba(0, 0, 0, 0.7); */
+    padding: 10rpx;
+    display: flex;
+    justify-content: space-around;
+}
+
+.controls text {
+    color: #fff;
+    font-size: 24rpx;
+    padding: 8rpx 16rpx;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 4rpx;
+}
+</style>

packageA/pages/post/post.vue

@@ -1,80 +1,153 @@
 <template>
-    <view class="container">
-        <view class="job-header">
-            <view class="job-title">{{ jobInfo.jobTitle }}</view>
-            <view class="job-info">
-                <text class="salary">{{ jobInfo.minSalary }}-{{ jobInfo.maxSalary }}/月</text>
-                <text class="views">{{ jobInfo.view }}浏览</text>
+    <AppLayout title="" backGorundColor="#F4F4F4">
+        <template #headerleft>
+            <view class="btn">
+                <image src="@/static/icon/back.png" @click="navBack"></image>
             </view>
-            <view class="location-info">
-                <view class="location" style="display: inline-block">
-                    📍 青岛
-                    <dict-Label dictType="area" :value="jobInfo.jobLocationAreaCode"></dict-Label>
+        </template>
+        <template #headerright>
+            <view class="btn mar_ri10">
+                <image src="@/static/icon/collect3.png" v-if="!jobInfo.isCollection" @click="jobCollection"></image>
+                <image src="@/static/icon/collect2.png" v-else @click="jobCollection"></image>
+            </view>
+        </template>
+        <view class="content">
+            <view class="content-top btn-feel">
+                <view class="top-salary">{{ jobInfo.minSalary }}-{{ jobInfo.maxSalary }}/月</view>
+                <view class="top-name">{{ jobInfo.jobTitle }}</view>
+                <view class="top-info">
+                    <view class="info-img"><image src="/static/icon/post12.png"></image></view>
+                    <view class="info-text">
+                        <dict-Label dictType="experience" :value="jobInfo.experience"></dict-Label>
+                    </view>
+                    <view class="info-img mar_le20"><image src="/static/icon/post13.png"></image></view>
+                    <view class="info-text">
+                        <dict-Label dictType="education" :value="jobInfo.education"></dict-Label>
+                    </view>
+                </view>
+                <view class="position-source">
+                    <text>来源&nbsp;</text>
+                    {{ jobInfo.dataSource }}
                 </view>
-                <text class="date">{{ jobInfo.postingDate || '发布日期' }}</text>
-                <view class="source">来源 智联招聘</view>
             </view>
-        </view>
+            <view class="ai-explain" v-if="jobInfo.isExplain">
+                <view class="exbg">
+                    <view class="explain-left btn-shaky">
+                        <view class="leftText">AI+智能讲解，职位一听就懂</view>
+                        <view class="leftdownText">懒得看文字？我用AI讲给你听</view>
+                    </view>
+                    <view class="explain-right button-click" @click="seeExplain">点击查看</view>
+                </view>
+            </view>
+            <view class="content-card">
+                <view class="card-title">
+                    <text class="title">职位描述</text>
+                </view>
+                <view class="description" :style="{ whiteSpace: 'pre-wrap' }">
+                    {{ jobInfo.description }}
+                </view>
+            </view>
+            <view class="content-card">
+                <view class="card-title">
+                    <text class="title">公司信息</text>
+                    <text
+                        class="btntext button-click"
+                        @click="navTo(`/packageA/pages/UnitDetails/UnitDetails?companyId=${jobInfo.company.companyId}`)"
+                    >
+                        单位详情
+                    </text>
+                </view>
+                <view class="company-info">
+                    <view class="companyinfo-left">
+                        <image src="@/static/icon/companyIcon.png" mode=""></image>
+                    </view>
+                    <view class="companyinfo-right">
+                        <view class="row1">{{ jobInfo.company?.name }}</view>
+                        <view class="row2">
+                            <dict-tree-Label
+                                v-if="jobInfo.company?.industry"
+                                dictType="industry"
+                                :value="jobInfo.company?.industry"
+                            ></dict-tree-Label>
+                            <span v-if="jobInfo.company?.industry">&nbsp;</span>
+                            <dict-Label dictType="scale" :value="jobInfo.company?.scale"></dict-Label>
+                        </view>
+                        <view class="row2">
+                            <text>在招</text>
+                            <text style="color: #256bfa">{{ companyCount }}</text>
+                            <text>个职位</text>
+                        </view>
+                    </view>
+                </view>
+                <view class="company-map" v-if="jobInfo.latitude && jobInfo.longitude">
+                    <map
+                        style="width: 100%; height: 100%"
+                        :latitude="jobInfo.latitude"
+                        :longitude="jobInfo.longitude"
+                        :markers="mapCovers"
+                    ></map>
+                </view>
+            </view>
+            <view class="content-card">
+                <view class="card-title">
+                    <text class="title">竞争力分析</text>
+                </view>
+                <view class="description">
+                    三个月内共15位求职者申请，你的简历匹配度为{{ raderData.matchScore }}分，排名位于第{{
+                        raderData.rank
+                    }}位，超过{{ raderData.percentile }}%的竞争者，处在优秀位置。
+                </view>
+                <RadarMap :value="raderData"></RadarMap>
 
-        <view class="job-details">
-            <text class="details-title">职位详情</text>
-            <view class="tags">
-                <view class="tag"><dict-Label dictType="education" :value="jobInfo.education"></dict-Label></view>
-                <view class="tag"><dict-Label dictType="experience" :value="jobInfo.experience"></dict-Label></view>
-            </view>
-            <view class="description" :style="{ whiteSpace: 'pre-wrap' }">
-                {{ jobInfo.description }}
+                <view class="card-footer">
+                    <view class="footer-title">你与职位的匹配度</view>
+                    <view class="footer-content">
+                        <view class="progress-container">
+                            <view
+                                v-for="(item, index) in matchingDegree"
+                                :key="index"
+                                class="progress-item"
+                                :class="{
+                                    active: index < currentStep - 1,
+                                    half: index < currentStep && currentStep < index + 1, // 半条
+                                }"
+                            />
+                        </view>
+                    </view>
+                    <view class="progress-text">
+                        <view class="text-rpx" v-for="(item, index) in matchingDegree" :key="index">{{ item }}</view>
+                    </view>
+                </view>
             </view>
+            <view style="height: 24px"></view>
         </view>
-
-        <view
-            class="company-info"
-            @click="navTo(`/packageA/pages/UnitDetails/UnitDetails?companyId=${jobInfo.company.companyId}`)"
-        >
-            <view class="company-name">{{ jobInfo.company?.name }}</view>
-            <view class="company-details">
-                <dict-tree-Label
-                    v-if="jobInfo.company?.industry"
-                    dictType="industry"
-                    :value="jobInfo.company?.industry"
-                ></dict-tree-Label>
-                <span v-if="jobInfo.company?.industry">&nbsp;</span>
-                <dict-Label dictType="scale" :value="jobInfo.company?.scale"></dict-Label>
-                单位详情
+        <template #footer>
+            <view class="footer">
+                <view class="btn-wq button-click" @click="jobApply">立即前往</view>
             </view>
-            <view class="company-map" v-if="jobInfo.latitude && jobInfo.longitude">
-                <map
-                    style="width: 100%; height: 100%"
-                    :latitude="jobInfo.latitude"
-                    :longitude="jobInfo.longitude"
-                    :markers="mapCovers"
-                ></map>
-            </view>
-        </view>
-
-        <view class="footer">
-            <!-- <button class="apply-btn" v-if="!jobInfo.isApply" @click="jobApply">立即申请</button> -->
-            <button class="apply-btn" @click="jobApply">立即申请</button>
-            <!-- <button class="apply-btn btned" v-else>已申请</button> -->
-            <view class="falls-card-matchingrate" @click="jobCollection">
-                <uni-icons v-if="!jobInfo.isCollection" type="star" size="40"></uni-icons>
-                <uni-icons v-else type="star-filled" color="#FFCB47" size="40"></uni-icons>
-            </view>
-        </view>
-    </view>
+        </template>
+        <VideoPlayer ref="videoPalyerRef" />
+    </AppLayout>
 </template>
 
 <script setup>
 import point from '@/static/icon/point.png';
+import VideoPlayer from './component/videoPlayer.vue';
 import { reactive, inject, watch, ref, onMounted, computed } from 'vue';
 import { onLoad, onShow } from '@dcloudio/uni-app';
 import dictLabel from '@/components/dict-Label/dict-Label.vue';
-const { $api, navTo, getLenPx, parseQueryParams } = inject('globalFunction');
-
+const { $api, navTo, getLenPx, parseQueryParams, navBack } = inject('globalFunction');
+import RadarMap from './component/radarMap.vue';
+const matchingDegree = ref(['一般', '良好', '优秀', '极好']);
+const currentStep = ref(1);
+const companyCount = ref(0);
 const jobInfo = ref({});
 const state = reactive({});
 const mapCovers = ref([]);
 const jobIdRef = ref();
+const raderData = ref({});
+const videoPalyerRef = ref(null);
+const explainUrlRef = ref('');
 
 onLoad((option) => {
     if (option.jobId) {
@@ -94,13 +167,23 @@ function initLoad(option) {
     if (jobId !== jobIdRef.value) {
         jobIdRef.value = jobId;
         getDetail(jobId);
+        getCompetivetuveness(jobId);
+    }
+}
+
+function seeExplain() {
+    if (jobInfo.value.explainUrl) {
+        videoPalyerRef.value?.open(jobInfo.value.explainUrl);
+        // console.log(jobInfo.value.explainUrl);
+        // explainUrlRef.value = jobInfo.value.explainUrl;
     }
 }
 
 function getDetail(jobId) {
     $api.createRequest(`/app/job/${jobId}`).then((resData) => {
-        const { latitude, longitude, companyName } = resData.data;
+        const { latitude, longitude, companyName, companyId } = resData.data;
         jobInfo.value = resData.data;
+        getCompanyIsAJobs(companyId);
         if (latitude && longitude) {
             mapCovers.value = [
                 {
@@ -123,6 +206,12 @@ function getDetail(jobId) {
     });
 }
 
+function getCompanyIsAJobs(companyId) {
+    $api.createRequest(`/app/company/count/${companyId}`).then((resData) => {
+        companyCount.value = resData.data;
+    });
+}
+
 function getTextWidth(text, size = 12) {
     const canvas = document.createElement('canvas');
     const context = canvas.getContext('2d');
@@ -130,6 +219,13 @@ function getTextWidth(text, size = 12) {
     return -(context.measureText(text).width / 2) - 20; // 计算文字中心点
 }
 
+function getCompetivetuveness(jobId) {
+    $api.createRequest(`/app/job/competitiveness/${jobId}`, {}, 'GET').then((resData) => {
+        raderData.value = resData.data;
+        currentStep.value = resData.data.matchScore * 0.04;
+    });
+}
+
 // 申请岗位
 function jobApply() {
     const jobId = jobInfo.value.jobId;
@@ -164,105 +260,273 @@ function jobCollection() {
 </script>
 
 <style lang="stylus" scoped>
-
-::v-deep .amap-logo {
-  opacity: 0 !important;
+.btn {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 60rpx;
+    height: 60rpx;
 }
-::v-deep .amap-copyright {
-  opacity: 0 !important;
+image {
+    height: 100%;
+    width: 100%;
 }
-.container
-    display flex
-    flex-direction column
-    background-color #f8f8f8
-.job-header
-  padding 20rpx 40rpx
-  background-color #ffffff
-  margin-bottom 10rpx
-  .job-title
-    font-size 55rpx
-    font-weight bold
-    color #333
-    margin-bottom 10rpx
-  .job-info
-    display flex
-    justify-content space-between
-    margin-bottom 10rpx
-    .salary
-      color #3b82f6
-      font-size 42rpx
-      font-weight bold
-    .views
-      font-size 24rpx
-      color #999
-  .location-info
-    font-size 24rpx
-    color #666
-    .location, .source, .date
-      margin-right 10rpx
-      margin-top: 20rpx
-    .source
-      margin-left: 30rpx;
+.progress-container {
+  display: flex;
+  align-items: center;
+  gap: 8rpx; /* 间距 */
+  margin-top: 24rpx
 
-.job-details
-  background-color #fff
-  padding 20rpx 40rpx
-  margin-bottom 10rpx
-  .details-title
-    font-size 41rpx
-    font-weight bold
-    margin-bottom 15rpx
-  .tags
-    display flex
-    gap 10rpx
-    margin 15rpx 0
-    .tag
-      background-color #3b82f6
-      color #fff
-      padding 5rpx 15rpx
-      border-radius 15rpx
-      font-size 22rpx
-  .description
-    font-size 24rpx
-    line-height 36rpx
-    color #333
-
-.company-info
-  background-color #fff
-  padding 20rpx 40rpx
-  margin-bottom 300rpx
-  .company-name
-    font-size 28rpx
-    font-weight bold
-    margin-bottom 10rpx
-  .company-details
-    font-size 24rpx
-    color #666
-  .company-map
-    height: 340rpx
+}
+.progress-text{
+    margin-top: 8rpx
+    display: flex;
+    align-items: center;
+    gap: 8rpx; /* 间距 */
+    justify-content: space-around
     width: 100%
-    background: #e8e8e8
-    margin-top: 10rpx
-    border-radius: 16rpx
-    overflow: hidden
+    font-weight: 400;
+    font-size: 20rpx;
+    color: #999999;
+    text-align: center;
+}
 
-.footer
-  position fixed
-  bottom calc(var(--status-bar-height) + var(--window-bottom))
-  left 0
-  width calc(100% - 40rpx)
-  padding 20rpx
-  background-color #fff
-  text-align center
-  display flex
-  align-items: center
-  .apply-btn
-    flex: 1
-    background-color #22c55e
-    color #fff
-    border-radius 30rpx
-    font-size 32rpx
-    margin-right: 30rpx
-  .btned
-    background-color #666666
+.progress-item {
+  width: 25%;
+  height: 24rpx;
+  background-color: #eee;
+  border-radius: 24rpx;
+  overflow: hidden;
+  position: relative;
+    transition: background-color 0.3s;
+}
+
+/* 完整激活格子 */
+.progress-item.active {
+  background: linear-gradient(to right, #256bfa, #8c68ff);
+}
+
+/* 当前进度进行中的格子 */
+.progress-item.half::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%; /* 根据 currentStep 小数动态控制 */
+  // background: linear-gradient(to right, #256bfa, #8c68ff);
+  background: linear-gradient(to right, #256bfa 50%, #eaeaea 50%);
+  border-radius: 24rpx;
+}
+.card-footer{
+    .footer-title{
+        font-weight: 600;
+        font-size: 28rpx;
+        color: #000000;
+    }
+
+    .footer-content{
+        .content-line{
+            display: grid
+            grid-template-columns: repeat(4, 1fr)
+            background: linear-gradient( to left, #9E74FD 0%, #256BFA 100%);
+            border-radius: 10rpx
+            .line-pargrah{
+                height: 20rpx;
+                position: relative
+            }
+            .line-pargrah::after{
+                position: absolute;
+                content: '';
+                right: 10
+                top: 0
+                width: 6rpx
+                height: 20rpx
+                background: #FFFFFF
+            }
+        }
+    }
+}
+// ai
+.ai-explain{
+    margin-top: 28rpx
+    background-color: #FFFFFF
+    border-radius: 20rpx 20rpx 20rpx 20rpx;
+    overflow: hidden
+    .exbg{
+        padding: 28rpx 40rpx;
+        display: flex
+        align-items: center
+        justify-content: space-between
+        background: url('@/static/icon/aibg.png') center center no-repeat;
+        background-size: 100% 100%
+        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
+    }
+    .explain-left{
+        .leftText{
+            font-weight: 600;
+            font-size: 32rpx;
+        }
+        .leftdownText{
+            margin-top: 12rpx
+            font-weight: 400;
+            font-size: 28rpx;
+            color: #495265;
+        }
+    }
+    .explain-right{
+        width: 168rpx;
+        height: 72rpx;
+        border-radius: 40rpx 40rpx 40rpx 40rpx;
+        border: 2rpx solid #E7E9ED;
+        text-align: center;
+        line-height: 72rpx
+        font-weight: 400;
+        font-size: 28rpx;
+        color: #333333;
+    }
+}
+.content{
+    padding: 0 28rpx
+    height: 100%
+    .content-top{
+        background: #FFFFFF;
+        box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.04);
+        border-radius: 20rpx 20rpx 20rpx 20rpx;
+        padding: 52rpx 32rpx 34rpx 32rpx
+        position: relative
+        overflow: hidden
+        .top-salary{
+            font-weight: 500;
+            font-size: 32rpx;
+            color: #4C6EFB;
+        }
+        .top-name{
+            font-weight: 600;
+            font-size: 36rpx;
+            color: #000000;
+            margin-top: 8rpx
+        }
+        .top-info{
+            margin-top: 22rpx
+            display: flex;
+            align-items: center
+            .info-img{
+                width: 40rpx;
+                height: 40rpx
+            }
+            .info-text{
+                font-weight: 400;
+                font-size: 28rpx;
+                color: #6C7282;
+                margin-left: 10rpx
+            }
+        }
+        .position-source{
+            position: absolute
+            top: 0
+            right: 0
+            width: fit-content;
+            height: 76rpx;
+            padding: 0 24rpx
+            background: rgba(37,107,250,0.1);
+            box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.04);
+            text-align: center
+            line-height: 76rpx
+            font-weight: 400;
+            font-size: 28rpx;
+            color: #64779F;
+            border-bottom-left-radius: 20rpx
+        }
+    }
+    .content-card{
+        padding: 24rpx
+        margin-top: 28rpx
+        background: #FFFFFF;
+        box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.04);
+        border-radius: 20rpx 20rpx 20rpx 20rpx;
+        .card-title{
+            font-weight: 600;
+            font-size: 32rpx;
+            color: #000000;
+            position: relative;
+            display: flex
+            justify-content: space-between
+            .title{
+                position: relative;
+                z-index: 2;
+            }
+            .btntext{
+                white-space: nowrap
+                font-weight: 400;
+                font-size: 28rpx;
+                color: #256BFA;
+            }
+        }
+        .card-title::before{
+            position: absolute
+            content:  '';
+            left: -14rpx
+            bottom: 0
+            height: 16rpx;
+            width: 108rpx;
+            background: linear-gradient(to right, #CBDEFF, #FFFFFF);
+            border-radius: 8rpx;
+            z-index: 1;
+        }
+        .description{
+            margin-top: 30rpx
+            font-weight: 400;
+            font-size: 28rpx;
+            color: #495265;
+        }
+        .company-info{
+            padding-top: 30rpx
+            display: flex
+            flex-direction: row
+            flex-wrap: nowrap
+            .companyinfo-left{
+                width: 96rpx;
+                height: 96rpx;
+                margin-right: 24rpx
+            }
+            .companyinfo-right{
+
+                .row1{
+                    font-weight: 500;
+                    font-size: 32rpx;
+                    color: #333333;
+                }
+                .row2{
+                    font-weight: 400;
+                    font-size: 28rpx;
+                    color: #6C7282;
+                    line-height: 45rpx;
+                }
+            }
+        }
+        .company-map{
+            margin-top: 28rpx
+            height: 416rpx;
+            border-radius: 20rpx 20rpx 20rpx 20rpx;
+            overflow: hidden
+        }
+    }
+}
+.footer{
+    background: #FFFFFF;
+    box-shadow: 0rpx -4rpx 24rpx 0rpx rgba(11,44,112,0.12);
+    border-radius: 0rpx 0rpx 0rpx 0rpx;
+    padding: 40rpx 28rpx 20rpx 28rpx
+    .btn-wq{
+        height: 90rpx;
+        background: #256BFA;
+        border-radius: 12rpx 12rpx 12rpx 12rpx;
+        font-weight: 500;
+        font-size: 32rpx;
+        color: #FFFFFF;
+        text-align: center;
+        line-height: 90rpx
+    }
+}
 </style>