feat: 列表卡片新增所属地区角标，并修正筛选条间距与遮罩压灰

- 三个列表（文旅场馆/商户折扣/权益待使用）缩略图左上角增加所属地区角标：
  缩略图外套 .card-thumb 承担尺寸与圆角裁切，角标半透明黑底白字 10px；
  districtName 为空的记录不渲染角标，避免空色块
- 新增 common/district.js：后端返回的是行政区划全称，卡片位宽只有 75px，
  按「芷江侗族自治县→芷江、中方县→中方、怀化高新技术产业开发区→怀化高新区」缩短显示
- 筛选条与列表的 12px 间隔移到头部白底之外（各页 .list-area 顶部内边距），
  此前放在头部内是白色、与白色卡片连成一片，视觉上等于没有间隔
- 遮罩由 fixed 改为从筛选条下边缘绝对定位铺开：fixed 会落进 sticky 头部的层叠上下文，
  把搜索栏和筛选条一起压灰；现改为列表变暗、头部保持原色
- 权益页搜索框加 1px #e5e5ea 描边：吸顶栏改白底后白色输入框无边框可辨

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

pages/rights/rights.vue

@@ -113,9 +113,13 @@
 
 			<!-- 权益列表 -->
 			<!-- xuchao: 三 Tab 列表统一改普通容器 + 页面级触底分页（scroll-view 无固定高度时 scrolltolower 永不触发） -->
-			<view class="list-area" v-if="currentTab==0">
+			<view class="list-area list-area--todo" v-if="currentTab==0">
 				<view class="rights-card" v-for="item in rightsList" :key="item.ruleId" @click="goDetail(item)">
-					<image class="card-img" :src="item.image" mode="aspectFill" />
+					<view class="card-thumb">
+						<image class="card-img" :src="item.image" mode="aspectFill" />
+						<!-- xuchao: 左上角所属地区角标（districtName 来自商铺「所在地区」，未录入则不显示） -->
+						<text class="card-area" v-if="item.districtName">{{ shortDistrict(item.districtName) }}</text>
+					</view>
 					<view class="card-info">
 						<view class="card-name">{{ item.name }}</view>
 						<view class="card-category">{{ item.category }}</view>
@@ -176,6 +180,8 @@
 </template>
 
 <script>
+	// xuchao: 角标区县简称（后端返回的是行政区划全称）
+	import { shortDistrict } from '@/common/district.js'
 	// xuchao: 县区 + 类型筛选条，三个列表页共用（pages.json 的 easycom 只给 u- 前缀配了规则，这里显式引入）
 	import HhrsFilterBar from '@/components/hhrs-filter-bar/hhrs-filter-bar.vue'
 
@@ -279,6 +285,7 @@
 			}
 		},
 		methods: {
+			shortDistrict,
 			// xuchao: 缓存的权益状态可能过期（中奖/权益包会变化），每次进页面仅凭手机号向服务端
 			//         复查最新状态并覆盖缓存（不带证件号，避免触发被动认证）
 			refreshStatus() {
@@ -883,6 +890,10 @@
 		align-items: center;
 		height: 36px;
 		background-color: #ffffff;
+		/* xuchao: 头部改白底后，白色搜索框在白色吸顶栏上必须描边才分得出来；
+		   显式 border-box 保证加边框后高度仍是 36px */
+		border: 1px solid #e5e5ea;
+		box-sizing: border-box;
 		border-radius: 18px;
 		padding: 0 12px;
 		gap: 8px;
@@ -903,6 +914,12 @@
 		flex-direction: column;
 	}
 
+	/* xuchao: 「待使用」列表顶部 24rpx(=12px) 灰底间隔，与卡片之间的间距一致，
+	   也与筛选条和列表之间的 12px 对齐；只加在这个 Tab，不影响「已预约/已使用」 */
+	.list-area--todo {
+		padding-top: 24rpx;
+	}
+
 	.nomore-area {
 		width: 100%;
 		padding-bottom: 24px;
@@ -918,12 +935,38 @@
 		margin-bottom: 24rpx;
 	}
 
-	.card-img {
-		width: 150rpx;
-		height: 150rpx;
-		border-radius: 6px;
-		flex-shrink: 0;
-	}
+	.card-thumb {
+	width: 150rpx;
+	height: 150rpx;
+	border-radius: 6px;
+	overflow: hidden;
+	position: relative;
+	flex-shrink: 0;
+}
+
+/* xuchao: image 由 thumb 裁圆角，自身不再设圆角 */
+.card-img {
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+
+.card-area {
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: block;
+	max-width: 100%;
+	padding: 1px 5px;
+	border-radius: 0 0 6px 0;
+	background: rgba(0, 0, 0, 0.45);
+	color: #ffffff;
+	font-size: 10px;
+	line-height: 14px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
 
 	.card-info {
 		width: 490rpx;