feat:公司规模静态页面

pages/my/businessLicense.vue

@@ -28,7 +28,7 @@
         <image src="@/static/images/my/join-yzz.svg" mode="scaleToFill" />
       </view>
     </view>
-    <view class="next-btn">下一步</view>
+    <view class="next-btn" @click="goPeopleNumber">下一步</view>
   </view>
 </template>
 <script>
@@ -44,6 +44,9 @@ export default {
     goBusinessLicense() {
       uni.navigateTo({ url: "/pages/my/businessLicense" });
     },
+    goPeopleNumber(){
+        uni.navigateTo({ url: '/pages/my/peopleNumber' })
+    }
   },
 };
 </script>

pages/my/peopleNumber.vue

@@ -0,0 +1,138 @@
+<template>
+  <view class="switch-roles">
+    <nav-bar title="选择公司规模" color="#000"></nav-bar>
+    <view class="roles-content">
+      <view class="content">
+        <view class="title">公司规模</view>
+        <view class="desc">“深圳市汉睿国际猎头服务有限公司”的人员规模</view>
+        <view class="check-box">
+          <view
+            class="check-item"
+            :class="{ 'is-check': check == index }"
+            v-for="(item, index) in peopleList"
+            :key="index"
+            @click="checkPeople(index)"
+            >{{ item }}</view
+          >
+        </view>
+      </view>
+    </view>
+    <view class="submit-btn">确定</view>
+  </view>
+</template>
+<script>
+import navBar from "@/components/nav-bar/index.vue";
+export default {
+  data() {
+    return {
+      peopleList: [
+        "0-20人",
+        "20-99人",
+        "100-499人",
+        "500-999人",
+        "1000-9999人",
+        "10000人以上",
+      ],
+      check: 0,
+    };
+  },
+  components: {
+    navBar,
+  },
+  methods: {
+    goBusinessLicense() {
+      uni.navigateTo({ url: "/pages/my/businessLicense" });
+    },
+    checkPeople(index) {
+      this.check = index;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.switch-roles {
+  background-color: #fff;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  .roles-content {
+    width: 100%;
+    flex: 1;
+    overflow: hidden;
+    overflow-y: auto;
+    .content {
+      padding: 40rpx;
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      .title {
+        color: #333;
+        width: 100%;
+        font-family: DM Sans;
+        font-size: 40rpx;
+        font-weight: 600;
+      }
+      .desc {
+        color: rgba(102, 102, 102, 1);
+        width: 100%;
+        font-family: DM Sans;
+        font-size: 24rpx;
+        font-weight: 400;
+        line-height: 32rpx;
+        letter-spacing: 0.5%;
+        text-align: left;
+        padding: 20rpx 0;
+        box-sizing: border-box;
+      }
+      .check-box {
+        width: 100%;
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 24rpx;
+        .check-item {
+          border-radius: 16rpx;
+          background: rgba(245, 248, 254, 1);
+          color: rgba(153, 153, 153, 1);
+          font-family: DM Sans;
+          font-size: 28rpx;
+          font-weight: 400;
+          line-height: 44rpx;
+          text-align: center;
+          padding: 12rpx 48rpx;
+          box-sizing: border-box;
+        }
+        .is-check {
+          box-sizing: border-box;
+          border: 1rpx solid #016bf6;
+          border-radius: 16rpx;
+          background: rgba(252, 233, 220, 1);
+          color: #016bf6;
+        }
+      }
+    }
+  }
+  .submit-btn {
+    flex-shrink: 0;
+    border-radius: 999px;
+    box-shadow: 0px 2px 4px 0px rgba(9, 196, 116, 0.3);
+    background: linear-gradient(90deg, rgba(13, 39, 247, 1), rgba(19, 193, 234, 1) 100%);
+    color: rgba(255, 255, 255, 1);
+    font-family: DM Sans;
+    font-size: 32rpx;
+    font-weight: 400;
+    line-height: 48rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 16rpx 32rpx;
+    box-sizing: border-box;
+    margin: 60rpx 20rpx;
+  }
+}
+</style>