<template>
  <view class="container">
    <view class="job-header">
      <view class="job-title">销售工程师-高级销售经理</view>
      <view class="job-info">
        <text class="salary">1万-2万/月</text>
        <text class="views">1024浏览</text>
      </view>
      <view class="location-info">
        <text class="location">📍 青岛 青岛经济技术开发区</text>
        <text class="date">2022.1.3</text>
        <view class="source">来源 智联招聘</view>
      </view>
    </view>

    <view class="job-details">
      <text class="details-title">职位详情</text>
      <view class="tags">
        <view class="tag">本科</view>
        <view class="tag">3-5年</view>
      </view>
      <view class="description">
        （我司在永磁同步电机行业技术优势明显：最高载频24kHZ，最高运行频率3000HZ，最高运行转速180000rpm。）职责：
        <br />
        1、结合公司业务优势，深挖行业大客户需求，为客户提供针对性的营销解决方案；
        <br />
        2、有丰富的项目落地执行经验；
        <br />
        3、做好应收款控制与管理。
        <br />
        要求：
        <br />
        1、统招本科以上学历，电气相关专业；
        <br />
        2、有3年以上从事变频器或相关经验者优先。
        <br />
      </view>
    </view>

    <view class="company-info" @click="navTo('/packageA/pages/UnitDetails/UnitDetails')">
      <view class="company-name">湖南沃森电气科技有限公司</view>
      <view class="company-details">制造业 100-299人 单位详情</view>
    </view>

    <view class="footer">
      <button class="apply-btn">立即申请</button>
      <view class="falls-card-matchingrate">
        <uni-icons type="star" size="40"></uni-icons>
        <!-- <uni-icons type="star-filled" color="#FFCB47" size="40"></uni-icons> -->
      </view>
    </view>
  </view>
</template>

<script setup>
import { reactive, inject, watch, ref, onMounted } from 'vue';
const { $api, navTo } = inject('globalFunction');
</script>

<style lang="stylus" scoped>
.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;

.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 10rpx
  .company-name
    font-size 28rpx
    font-weight bold
    margin-bottom 10rpx
  .company-details
    font-size 24rpx
    color #666

.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
</style>
