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/post/post.vue
+++ b/packageA/pages/post/post.vue
@@ -0,0 +1,146 @@
+<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>