volunteer index - tier

package.json

@@ -9,7 +9,7 @@
     "build": "uni build -p",
     "build:h5": "uni build pro-h5",
     "build:mp": "uni build pro-mp",
-    "wx:dev": "npm run server mp-dev"
+    "dev:wx": "npm run server mp-dev"
   },
   "uni-app": {
     "scripts": {

src/pagesMain/pages/volunteer/components/volunteer-policy-item.vue

@@ -1,9 +1,10 @@
 <template>
-    <view class="pl-28 pr-18 py-28 flex flex-between items-center bg-[#F6F8FA] rounded-xl">
-        <view>
+    <view class="pl-28 pr-18 py-28 flex justify-between items-center bg-back-light rounded-xl relative">
+        <view class="absolute z-1">
             <view class="text-nowrap text-sm text-fore-title font-bold">{{title}}</view>
             <view class="mt-5 text-nowrap text-3xs text-fore-tip">{{desc}}</view>
         </view>
+        <view/>
         <ie-image is-oss :src="icon" custom-class="w-108" />
     </view>
 </template>

src/pagesMain/pages/volunteer/components/volunteer-tier-item.vue

@@ -1,22 +1,22 @@
 <template>
-    <view class="rounded-xl bg-gradient-to-b w-[230px] min-w-[230px] volunteer-tier-item"
-          :class="[data.colorFrom, data.colorTo]">
+    <view class="rounded-xl w-460 min-w-460 volunteer-tier-item"
+          :style="{ background: `radial-gradient( 0% 0% at 0% 0%, ${data.colorFrom} 0%, ${data.colorTo} 100%)` }">
         <view class="h-90 px-30 flex justify-between items-center">
             <view class="flex items-center">
-                <ie-image is-oss src="/volunteer/index/tier_medal.png" custom-class="w-48"/>
-                <text class="ml-8 text-base font-bold" :class="data.colorText">{{ data.typeName }}</text>
+                <ie-image is-oss :src="data.icon" custom-class="w-48"/>
+                <text class="ml-8 text-base font-bold" :style="{color:data.colorText}">{{ data.typeName }}</text>
             </view>
             <view class="text-sm text-fore-light flex items-center">
                 <text>更多</text>
                 <uv-icon name="arrow-right" color="info"/>
             </view>
         </view>
-        <uv-line/>
-        <view class="mt-10 px-30 text-sm" :class="data.colorText">{{ data.desc }}</view>
+        <uv-line hairline/>
+        <view class="mt-10 px-30 text-sm" :style="{color:data.colorText}">{{ data.desc }}</view>
         <view class="p-30 flex flex-col gap-20">
             <view v-for="(u, i) in data.list" class="flex text-sm">
-                <view class="w-20 text-fore-light">{{i+1}}</view>
-                <view class="text-fore-title truncate">{{u.name}}</view>
+                <view class="w-24 text-fore-light">{{ i + 1 }}</view>
+                <view class="text-fore-title truncate">{{ u.name }}</view>
             </view>
         </view>
     </view>
@@ -31,7 +31,4 @@ defineProps<{
 </script>
 
 <style scoped lang="scss">
-.volunteer-tier-item + .volunteer-tier-item {
-    margin-left: 28rpx;
-}
 </style>

src/pagesMain/pages/volunteer/components/volunteer-tier.vue

@@ -8,7 +8,7 @@
             </view>
         </view>
         <uv-scroll-list class="mt-28">
-            <volunteer-tier-item v-for="(t,i) in list" :key="i" :data="t"/>
+            <volunteer-tier-item v-for="(t,i) in list" :key="i" :data="t" :class="{'ml-28':i>0}"/>
         </uv-scroll-list>
     </view>
 </template>
@@ -21,9 +21,10 @@ const list = ref<Tier[]>([{
     typeName: '第一梯队',
     typeValue: 1,
     desc: '学考语数外255分以上',
-    colorFrom: 'from-[#F6FCFF]',
-    colorTo: 'to-[#EBF9FF]',
-    colorText: 'text-[#19517F]',
+    colorFrom: '#F6FCFF',
+    colorTo: '#EBF9FF',
+    colorText: '#19517F',
+    icon: '/volunteer/index/tier_medal.png',
     list: [{
         id: 1,
         name: '长沙民政职业技术学院',
@@ -47,29 +48,31 @@ const list = ref<Tier[]>([{
     typeName: '第二梯队',
     typeValue: 2,
     desc: '学考语数外255分以上',
-    colorFrom: 'from-[#F4FFFC]',
-    colorTo: 'to-[#E6FFF8]',
-    colorText: 'text-[#0E4C3C]',
+    colorFrom: '#F4FFFC',
+    colorTo: '#E6FFF8',
+    colorText: '#0E4C3C',
+    icon: '/volunteer/index/tier_medal_2.png',
     list: []
 }, {
     typeName: '第三梯队',
     typeValue: 2,
     desc: '学考语数外255分以上',
-    colorFrom: 'from-[#F6FCFF]',
-    colorTo: 'to-[#EBF9FF]',
-    colorText: 'text-[#19517F]',
+    colorFrom: '#F6FCFF',
+    colorTo: '#EBF9FF',
+    colorText: '#19517F',
+    icon: '/volunteer/index/tier_medal.png',
     list: []
 }, {
     typeName: '第四梯队',
     typeValue: 2,
     desc: '学考语数外255分以上',
-    colorFrom: 'from-[#F4FFFC]',
-    colorTo: 'to-[#E6FFF8]',
-    colorText: 'text-[#0E4C3C]',
+    colorFrom: '#F4FFFC',
+    colorTo: '#E6FFF8',
+    colorText: '#0E4C3C',
+    icon: '/volunteer/index/tier_medal_2.png',
     list: []
 }])
 </script>
 
-<style scoped>
-
+<style lang="scss" scoped>
 </style>

src/types/major.ts

@@ -162,6 +162,7 @@ export interface Tier {
     desc: string
     colorFrom?: string
     colorTo?: string
-    colorText: string
+    colorText?: string
+    icon?: string
     list: UniversitySimple[]
 }

tailwind.config.js

@@ -19,7 +19,7 @@ module.exports = {
   theme: {
     // 间距
     spacing: {
-      ...generateSize(400, "rpx"),
+      ...generateSize(500, "rpx"),
     },
     extend: {
       // 圆角