<template>
    <view class="container">
        <!-- 招聘会详情标题 -->
        <view class="header">
            <text class="header-title">2024年春季青岛市商贸服务业招聘会</text>
            <view class="header-info">
                <view class="location">
                    <uni-icons type="location-filled" color="#4778EC" size="24"></uni-icons>
                    青岛 市南区延安三路105号
                </view>
                <text class="date">2024年7月31日 周三</text>
            </view>
        </view>

        <!-- 参会单位列表 -->
        <view class="company-list">
            <text class="section-title">参会单位</text>
            <view class="company-row" v-for="company in companies" :key="company.id">
                <view class="left">
                    <view class="logo" :class="'logo-' + company.id">{{ company.id }}</view>
                    <view class="company-info">
                        <text class="company-name line_2">{{ company.name }}</text>
                        <text class="industry">{{ company.industry }}</text>
                        <view class="details">
                            <text>查看详情</text>
                            <uni-icons type="star" size="26"></uni-icons>
                            <!-- <uni-icons type="star-filled" color="#FFCB47" size="26"></uni-icons> -->
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            companies: [
                {
                    id: 1,
                    name: '湖南沃森电器科技有限公司',
                    industry: '制造业 100-299人',
                },
                {
                    id: 2,
                    name: '青岛成达汽车销售集团',
                    industry: '制造业 100-299人',
                },
                {
                    id: 3,
                    name: '青岛日森电器有限公司',
                    industry: '制造业 100-299人',
                },
                {
                    id: 4,
                    name: '青岛融合网络通信有限公司',
                    industry: '制造业 100-299人',
                },
            ],
        };
    },
};
</script>

<style lang="stylus" scoped>
.container
  display flex
  flex-direction column
  background-color #f8f8f8

.header
  padding 20rpx 40rpx
  background-color #fff
  .header-title
    font-size 56rpx
    font-weight bold
    color #333
    margin-bottom 10rpx
  .header-info
    margin-top: 20rpx
    font-size 24rpx
    color #666
    display flex
    align-items center
    justify-content space-between
    .location
      display flex
      align-items center
    .date
      flex-shrink 0

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

.company-row
  display flex
  justify-content space-between
  align-items center
  padding 20rpx
  border 2rpx solid #D9D9D9
  margin-top 20rpx
  border-radius 17rpx 17rpx 17rpx 17rpx
  .left
    display flex
    align-items center
    width: 100%
    height: 100%
    .logo
      background-color #22c55e
      color #fff
      font-size 24rpx
      font-weight bold
      width: 235rpx;
      height: 164rpx;
      display flex
      align-items center
      justify-content center
      border-radius 12rpx
      margin-right 20rpx
    .company-info
      min-height 164rpx
      flex 1
      display flex
      flex-direction column
      justify-content space-between
      .company-name
        font-size 28rpx
        color #333
        font-weight bold
      .industry
        font-size 24rpx
        color #666
      .details
        font-size 24rpx
        color #666
        display flex
        align-items center
        justify-content space-between
</style>
