fix(miniapp): 调整首页圆角布局并隐藏滚动条

shinnosuke

4 天以前 5ce0d76154bf4c1d70543476cdfad9a30195b0f8

 rencaika/pages/card-application-conditions/card-application-conditions.uvue

@@ -1,7 +1,7 @@
<template>
   <view class="page">
      <view class="custom-nav"><view class="safe-space" :style="'height:' + navTop + 'px'"></view><view class="nav-row" :style="'height:' + navHeight + 'px;padding-right:' + navRight + 'px'"><view class="back-button" hover-class="back-button-active" @tap="goBack"><image src="/static/news-assets/arrow-left.svg"></image></view><text class="nav-title">申请条件</text><view class="capsule-space" :style="'width:' + navWidth + 'px'"></view></view></view>
      <scroll-view class="content" scroll-y="true" show-scrollbar="false">
      <scroll-view class="content" scroll-y="true" :show-scrollbar="false">
         <view class="hero"><text class="hero-title">{{cardType}}</text><text class="hero-subtitle">东区人才卡申请条件</text></view>
         <view class="summary-card"><text class="summary-title">发放对象</text><text class="summary-text">{{recipient}}</text></view>
         <view class="conditions-card">
@@ -97,16 +97,25 @@
      // #endif
      recipient.value = '经区人才服务专窗认定的高层次人才，根据人才层次发放卓越人才卡、杰出人才卡或菁英人才卡。'
      conditions.value = '卓越人才卡\n发放对象：经区人才服务专窗认定的一至三类高层次人才。\n\n' + excellentConditions + '\n\n杰出人才卡\n发放对象：经区人才服务专窗认定的四至五类高层次人才。\n\n' + outstandingConditions + '\n\n菁英人才卡\n发放对象：经区人才服务专窗认定的六至七类高层次人才。\n\n' + eliteConditions
      conditionLines.value = conditions.value
         .replace(/（([0-9]+)）/g, '\n（$1）')
         .split('\n')
         .map((line: string): string => line.trim())
         .filter((line: string): boolean => line != '')
      conditionLines.value = normalizeConditionLines(conditions.value)
   })
   const conditionLineClass = (line: string): string => {
      const normalizeConditionLines = (value: string): string[] => {
         const result = [] as string[]
         for (const sourceLine of value.split('\n')) {
            const line = sourceLine.trim()
            if (line == '') continue
            for (const piece of line.split(/(?=[（(][0-9０-９]+[）)])/)) {
               const normalized = piece.trim()
               if (normalized != '') result.push(normalized)
            }
         }
         return result
      }
      const conditionLineClass = (line: string): string => {
      if (line == '卓越人才卡' || line == '杰出人才卡' || line == '菁英人才卡') return 'condition-line card-heading'
      if (line.indexOf('发放对象：') == 0) return 'condition-line recipient-heading'
      if (/^[一二三四五六七]类人才/.test(line)) return 'condition-line category-heading'
      if (/^\d+\.\s*/.test(line)) return 'condition-line numbered-heading'
      return 'condition-line'
   }
   const goBack = () => safeBack('/pages/card/card')
@@ -116,7 +125,7 @@
   .page { display: flex; width: 100%; height: 100vh; background-color: #FFF9F3; flex-direction: column; }
   .custom-nav { flex-shrink: 0; padding-bottom: 24rpx; background-image: linear-gradient(180deg, #FFE5AB 0%, #FFF4DC 100%); }
   .safe-space { height: 28px; } .nav-row { display: flex; height: 32px; box-sizing: border-box; padding-left: 26rpx; padding-right: 10px; position: relative; align-items: center; justify-content: space-between; }
   .back-button { display: flex; width: 60rpx; height: 60rpx; margin-left: -8rpx; justify-content: center; align-items: center; } .back-button image { width: 38rpx; height: 38rpx; } .back-button-active { opacity: .55; }
   .back-button { display: flex; width: 60rpx; height: 60rpx; position: absolute; left: 18rpx; top: 50%; margin: 0; transform: translateY(-50%); justify-content: center; align-items: center; z-index: 2; } .back-button image { width: 38rpx; height: 38rpx; } .back-button-active { opacity: .55; }
   .nav-title { position: absolute; left: 50%; top: 50%; color: #222326; font-size: 36rpx; font-weight: 700; transform: translate(-50%, -50%); white-space: nowrap; } .capsule-space { width: 88px; height: 100%; flex-shrink: 0; }
   .content { min-height: 0; flex: 1; } .hero { padding: 58rpx 58rpx 42rpx; background-image: linear-gradient(135deg, #F26B38 0%, #FA9534 100%); } .hero-title { display: block; color: #FFFFFF; font-size: 43rpx; font-weight: 700; } .hero-subtitle { display: block; margin-top: 15rpx; color: rgba(255,255,255,.87); font-size: 26rpx; }
   .summary-card, .conditions-card { margin: 30rpx 30rpx 0; padding: 34rpx; border-radius: 22rpx; background-color: #FFFFFF; box-shadow: 0 9rpx 28rpx rgba(116,76,46,.08); } .summary-title, .conditions-title { display: block; color: #24262A; font-size: 31rpx; font-weight: 700; } .summary-text { display: block; margin-top: 20rpx; color: #6F7782; font-size: 28rpx; line-height: 46rpx; }
@@ -124,7 +133,8 @@
   .condition-line { display: block; color: #535B66; font-size: 27rpx; line-height: 48rpx; }
   .card-heading { margin-top: 34rpx; color: #E84B35; font-size: 32rpx; font-weight: 700; }
   .conditions-content .card-heading:first-child { margin-top: 0; }
   .recipient-heading { margin: 15rpx 0 22rpx; color: #34383E; font-weight: 700; text-align: center; }
   .category-heading { margin-top: 19rpx; color: #34383E; font-weight: 700; }
   .recipient-heading { margin: 15rpx 0 22rpx; color: #E84B35; font-weight: 700; text-align: center; }
   .category-heading { margin-top: 19rpx; color: #34383E; font-weight: 700; text-align: center; }
   .numbered-heading { margin-top: 19rpx; color: #222222; font-weight: 700; }
   .content-bottom { height: 52rpx; height: calc(52rpx + env(safe-area-inset-bottom)); }
</style>