ks-app-employment-service/packageA/pages/UnitDetails/UnitDetails.vue

<template>
    <view class="container">
        <!-- 单位基本信息 -->
        <view class="company-header">
            <text class="company-name">湖南沃森电器科技有限公司</text>
            <view class="company-info">
                <view class="location">
                    <uni-icons type="location-filled" color="#4778EC" size="24"></uni-icons>
                    青岛 青岛经济技术开发区
                </view>
                <text class="industry">制造业 100-299人</text>
            </view>
        </view>
        <view class="hr"></view>
        <!-- 单位介绍 -->
        <view class="company-description">
            <view class="section-title">单位介绍</view>
            <text class="description">
                我司在永磁同步电机行业技术优势明显：最高载频达24kHZ，最高运行频率3000HZ，最高运行转速达到180000rpm。
            </text>
        </view>

        <!-- 在招职位 -->
        <view class="job-list">
            <text class="section-title">在招职位</text>
            <view class="job-row" v-for="job in jobs" :key="job.id">
                <view class="left">
                    <text class="job-title">{{ job.title }}</text>
                    <view class="job-tags">
                        <view class="tag" v-for="tag in job.tags" :key="tag">{{ tag }}</view>
                    </view>
                    <text class="location">{{ job.location }}</text>
                </view>
                <view class="right">
                    <text class="salary">{{ job.salary }}</text>
                    <text class="hot" v-if="job.hot">🔥</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            jobs: [
                {
                    id: 1,
                    title: '销售工程师-高级销售经理',
                    tags: ['本科', '3-5年', '15人', '本科', '3-5年', '15人'],
                    company: '湖南沃森电气科技有限公司',
                    location: '青岛 青岛经济技术开发区',
                    salary: '1万-2万',
                    hot: true,
                },
                {
                    id: 2,
                    title: '销售工程师-初级销售经理',
                    tags: ['本科', '3-5年', '15人'],
                    company: '湖南沃森电气科技有限公司',
                    location: '青岛 青岛经济技术开发区',
                    salary: '5千-1万',
                    hot: true,
                },
                {
                    id: 3,
                    title: '销售助理',
                    tags: ['大专', '3-5年', '20人'],
                    company: '湖南沃森电气科技有限公司',
                    location: '青岛 青岛经济技术开发区',
                    salary: '5千-8千',
                },
                {
                    id: 4,
                    title: '销售客服',
                    tags: ['大专', '3-5年', '50人'],
                    company: '湖南沃森电气科技有限公司',
                    location: '青岛 青岛经济技术开发区',
                    salary: '5千-8千',
                },
            ],
        };
    },
};
</script>

<style lang="stylus">
.container
  display flex
  flex-direction column
  background-color #f8f8f8
.hr
    height: 10rpx;
.company-header
  padding 20rpx 40rpx
  background-color #fff
  .company-name
    font-size 56rpx
    font-weight bold
    color #333
    margin-bottom 10rpx
  .company-info
    font-size 24rpx
    color #666
    display flex
    align-items center
    justify-content space-between
    .location
      display flex
      align-items center

.company-description
  padding 20rpx 40rpx
  background-color #fff
  margin-bottom 10rpx
  .section-title
    font-size 42rpx
    font-weight bold
    margin-bottom 10rpx

  .description
    font-size 24rpx
    color #333
    line-height 36rpx

.job-list
  padding 20rpx 40rpx
  background-color #fff
  .section-title
    font-size 42rpx
    font-weight bold
    margin-bottom 10rpx
  .job-row
    display flex
    justify-content space-between
    align-items flex-start
    padding 20rpx
    border 2rpx solid #D9D9D9
    margin-top 20rpx
    border-radius 17rpx 17rpx 17rpx 17rpx
    .left
      display flex
      flex-direction column
      flex-grow 1
      .job-title
        font-size 28rpx
        font-weight bold
        color #333
        margin-bottom 10rpx
      .job-tags
        display flex
        gap 10rpx
        margin-bottom 10rpx
        .tag
          background-color #22c55e
          color #fff
          padding 5rpx 10rpx
          border-radius 12rpx
          font-size 20rpx
      .location
        font-size 24rpx
        color #666
    .right
      display flex
      flex-direction column
      align-items flex-end
      .salary
        font-size 28rpx
        color #3b82f6
        font-weight bold
      .hot
        color #ff6b6b
        font-size 24rpx
        margin-top 5rpx
</style>