修改茶艺师等级和修改茶艺师列表样式

src/bundle_b/pages/tea-specialist/list.vue

@@ -10,7 +10,7 @@
 <template>
 	<view class="home-bg">
 		<view class="home-bg w-[100%] sticky top-0 left-0 z-100">
-			<wd-navbar safeAreaInsetTop :bordered="false" custom-style="background-color: transparent !important;">
+			<wd-navbar safeAreaInsetTop :bordered="false" custom-style="background-color: #fff !important;">
                 <template #left>
                     <view class="flex items-center" @click="List.handleBack">
                         <view class="mt-4rpx">
@@ -21,62 +21,40 @@
                 </template>
             </wd-navbar>
 
-            <view class="search-box relative">
+            <view class="search-box px-30rpx pb-10rpx pt-20rpx bg-[#fff]">
-				<wd-search placeholder="茶艺师名称" cancel-txt="搜索" placeholder-left hide-cancel	custom-input-class="!h-72rpx !pr-160rpx" v-model="keywords" light >
+				<view class="w-full h-72rpx bg-[#F6F7F8] rounded-36rpx flex items-center pl-30rpx pr-6rpx">
-				</wd-search>
+                    <wd-icon name="search" size="32rpx" color="#C0C4CC"></wd-icon>
+                    <input 
+                        type="text" 
+                        class="flex-1 ml-16rpx text-28rpx h-full bg-transparent" 
+                        placeholder="茶艺师名称" 
+                        placeholder-style="color: #C0C4CC" 
+                        v-model="keywords" 
+                        @confirm="List.handleSearch" 
+                        confirm-type="search"
+                    />
                     <view 
-					class="absolute top-1/2 -translate-y-1/2 right-34rpx w-142rpx h-64rpx leading-64rpx text-center rounded-32rpx bg-#4C9F44 text-#fff font-400 text-32rpx" 
+                        class="w-142rpx h-60rpx flex justify-center items-center rounded-30rpx bg-[#4C9F44] text-[#fff] text-28rpx" 
                         @click="List.handleSearch">
                         搜索
                     </view>
                 </view>
 			</view>
+		</view>
 
         <!-- 团体茶艺师预购 -->
-        <!-- <view class="">
+        <view class="flex items-center justify-center pt-20rpx bg-[#fff] pb-28rpx" @click="router.navigateTo('/bundle/reserve-group/reserve-group')">
-            <view class="mx-30rpx flex items-center">
+            <wd-img :src="`${OSS}images/teaspecialist/image1.png`" width="690rpx" height="320rpx"></wd-img>
-                <view class="flex items-center mr-14rpx">
-                    <wd-img width="160rpx" height="36rpx" :src="`${OSS}images/h5/home/home_image1.png`" />
         </view>
-                <view class="flex items-center mr-14rpx">
-                    <view class="flex items-center">
-                        <wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_safe2.png`" />
-                    </view>
-                    <view class="font-400 text-22rpx leading-32rpx text-#818CA9">专业资质</view>
-                </view>
-                <view class="flex items-center">
-                    <view class="flex items-center">
-                        <wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_safe2.png`" />
-                    </view>
-                    <view class="font-400 text-22rpx leading-32rpx text-#818CA9">定制方案</view>
-                </view>
-            </view> -->
-
-            <!-- <view class="mt-16rpx relative w-690rpx h-260rpx mx-30rpx"> -->
-            <!-- <view class="mt-16rpx relative w-690rpx h-260rpx mx-30rpx" @click="router.navigateTo('/pages/reserve/group-tea-specialist')"> -->
-				<!-- <wd-img width="690rpx" height="260rpx" :src="`${OSS}images/h5/home/home_image2.png`" mode="scaleToFill" />
-				<view class="h-64rpx absolute bottom-0 right-0 bg-[#4C9F44] text-[#fff] flex items-center px-26rpx rounded">
-					<text class="mr-8rpx">一键约</text>
-					<wd-img width="22rpx" height="18.06rpx" :src="`${OSS}icon/icon_arrow_right.png`" mode="aspectFit" />
-				</view>
-			</view>
-        </view> -->
 
         <!-- 茶艺师列表 -->
-        <view class="">
+        <view class="level-bg pt-28rpx">
-            <view class="relative mt-44rpx h-44rpx mx-30rpx">
-				<view class="absolute ele-center">
-					<wd-img width="252rpx" height="24rpx" :src="`${OSS}images/home/home_image3.png`" mode="aspectFit" />
-				</view>
-				<view class="text-32rpx text[#303133] font-500 absolute top-0 ele-center">茶艺师</view>
-			</view>
-
             <!-- 茶艺师等级筛选 -->
-            <view class="flex items-center text-#303133 overflow-x-auto whitespace-nowrap ml-30rpx my-30rpx tea-level-scrollbar">
+            <view class="flex items-center text-#303133 overflow-x-auto whitespace-nowrap ml-30rpx mb-30rpx tea-level-scrollbar">
                 <view 
                     v-for="(item, index) in TeaSpecialistLevels" :key="index"
                     class="h-64rpx rounded-12rpx px-24rpx py-12rpx flex items-center justify-center font-400 text-28rpx mr-20rpx"
-                    :class="selectedLevel.includes(item.level) ? 'bg-[#4C9F44] text-[#fff]' : 'bg-[#FFF] text-[#606266]'"
+                    :class="selectedLevel.includes(item.level) ? 'border-2rpx border-solid border-[#4C9F44] text-[#4C9F44] bg-[#fff]' : 'bg-[#FFF] text-[#606266]'"
                     @click="List.handleToggleTeaSpecialistLevel(item.level)">
                     {{ item.label}}
                 </view>
@@ -286,7 +264,7 @@
 
     .home-bg {
         background-color: $cz-page-background;
-        background-image: url(#{$OSS}images/home/home_bg.png);
+        // background-image: url(#{$OSS}images/home/home_bg.png);
         background-size: 100%;
         background-repeat: no-repeat;
     }
@@ -294,7 +272,11 @@
     .search-box {
 		:deep() {
 			.wd-search {
-				background: transparent !important;
+				background: #fff !important;
+			}
+
+            .wd-search__search-left-icon {
+                color: #999 !important;
             }
 		}
 	}
@@ -318,4 +300,10 @@
         min-width: 80rpx;
         height: 38rpx;
     }
+
+    .level-bg {
+        background: linear-gradient( 180deg, #E9FFF1 0%, #F6F7F8 100%) no-repeat;
+        background-size: 100% 220rpx;
+        border-radius: 20rpx 20rpx 0rpx 0rpx;
+    }
 </style>

src/utils/teaSpecialist.ts

@@ -1,10 +1,10 @@
 // 茶艺师等级枚举
 export enum TeaSpecialistLevel {
-    Gold = '金牌茶艺师',
+    Gold = '云华茶艺师',
-    Senior = '高级茶艺师',
+    Senior = '竹影茶艺师',
-    Intermediate = '中级茶艺师',
+    Intermediate = '明月茶艺师',
-    Junior = '初级茶艺师',
+    Junior = '清风茶艺师',
-    Enthusiast = '茶艺爱好者'
+    // Enthusiast = '茶艺爱好者'
 }
 
 // 等级名称对应值
@@ -13,7 +13,7 @@ export const TeaSpecialistLevelValue = {
     ['高级茶艺师']: 'senior',
     ['中级茶艺师']: 'intermediate',
     ['初级茶艺师']: 'junior',
-    ['茶艺爱好者']: 'enthusiast',
+    // ['茶艺爱好者']: 'enthusiast',
 }
 
 // 茶艺师对象结构
@@ -22,5 +22,5 @@ export const TeaSpecialistLevels = [
     { id: 2, value: 'senior', label: TeaSpecialistLevel.Senior, level: 4 },
     { id: 3, value: 'intermediate', label: TeaSpecialistLevel.Intermediate, level: 3 },
     { id: 4, value: 'junior', label: TeaSpecialistLevel.Junior, level: 2 },
-    { id: 5, value: 'enthusiast', label: TeaSpecialistLevel.Enthusiast, level: 1 }
+    // { id: 5, value: 'enthusiast', label: TeaSpecialistLevel.Enthusiast, level: 1 }
 ];