148 lines
3.9 KiB
Vue
148 lines
3.9 KiB
Vue
<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>
|