flat: 页面初始化

2024-11-18 16:33:37 +08:00
parent cf8fc80b20
commit ad4eb162a5
83 changed files with 8250 additions and 89 deletions
--- a/packageA/pages/exhibitors/exhibitors.vue
+++ b/packageA/pages/exhibitors/exhibitors.vue
@@ -0,0 +1,147 @@
+<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>