瀏覽代碼

修改首页导航栏样式

shmily1213 7 小時之前
父節點
當前提交
6a653011a1

+ 5 - 2
src/components/ie-dropdown/ie-dropdown-item.vue

@@ -21,7 +21,7 @@
           :style="contentStyle" @click="">
           <scroll-view class="relative max-h-[300px]" scroll-y>
             <uv-checkbox-group v-model="checkboxValue" placement="column" iconPlacement="right" borderBottom>
-              <uv-checkbox :customStyle="{ marginBottom: '0', paddingBottom: '0', height: '36px', padding: '0 10px' }"
+              <uv-checkbox :customStyle="{ marginBottom: '0', paddingBottom: '0', height: '38px', padding: '0 10px' }"
                 v-for="(item, index) in config.options" :key="index" :label="item.label"
                 :name="item.value"></uv-checkbox>
             </uv-checkbox-group>
@@ -31,7 +31,10 @@
               <uv-button type="primary" plain shape="circle" @click="handleReset">重置</uv-button>
             </view>
             <view class="flex-1">
-              <uv-button type="primary" shape="circle" @click="handleSubmit">确定</uv-button>
+              <uv-button type="primary" shape="circle" @click="handleSubmit">
+                <text>确定</text>
+                <text v-if="checkboxValue.length > 0">({{ checkboxValue.length }})</text>
+              </uv-button>
             </view>
           </view>
         </view>

+ 6 - 6
src/pagesMain/pages/index/index.vue

@@ -2,16 +2,16 @@
   <ie-page bg-color="white">
     <ie-navbar transparent bg-color="#FFFFFF" :placeholder="false" custom-back :click-hover="false">
       <template #headerLeft>
-        <view class="flex items-center">
-          <view class="text-36 text-fore-title font-bold">{{ orgName }}</view>
-          <view class="w-6 h-6 rounded-2 bg-black mx-12"></view>
-          <view>升学备考好帮手</view>
+        <view class="flex items-center gap-7 text-fore-title">
+          <view class="text-38 font-bold">{{ orgName }}</view>
+          <text>·</text>
+          <view class="text-30 font-medium">升学备考好帮手</view>
         </view>
       </template>
       <template #headerRight="{ isTransparent }">
         <view v-if="userStore.getLocation" class="ml-10 flex items-center gap-x-4" @click="handleChangeLocation">
-          <uv-icon name="map" size="14" :color="isTransparent ? '#333' : 'var(--primary-color)'" />
-          <text class="text-26 transition-colors duration-300"
+          <uv-icon name="map" size="16" :color="isTransparent ? '#333' : 'var(--primary-color)'" />
+          <text class="text-30 transition-colors duration-300 font-medium"
             :class="[isTransparent ? 'text-fore-title' : 'text-primary']">
             {{ userStore.getLocation }}
           </text>

+ 33 - 33
src/pagesMain/pages/volunteer/volunteer.vue

@@ -1,49 +1,49 @@
 <template>
-    <ie-page bg-color="white">
-        <ie-navbar bg-color="#FFFFFF" transparent custom-back :click-hover="false">
-            <template #headerLeft>
-                <view class="flex items-center gap-7 text-fore-subtitle text-sm font-medium">
-                    <ie-image is-oss src="/volunteer/index/navbar_title.png" custom-class="w-146"/>
-                    <text>·</text>
-                    <text>{{ examTypeName }}</text>
-                </view>
-            </template>
-            <template #headerRight>
-                <view class="flex items-center gap-5 text-fore-subtitle text-base font-medium">
-                    <ie-image is-oss src="/volunteer/index/navbar_location.png" custom-class="w-24"/>
-                    <text>{{ userStore.getLocation }}</text>
-                </view>
-            </template>
-        </ie-navbar>
-        <volunteer-banner :style="{marginTop: (baseStickyTop + 10) + 'px'}"/>
-        <volunteer-menu/>
-        <ie-gap/>
-        <volunteer-policy/>
-        <volunteer-echelon/>
-        <template #tabbar>
-            <ie-tabbar :active="1"/>
-        </template>
-    </ie-page>
+  <ie-page bg-color="white">
+    <ie-navbar bg-color="#FFFFFF" transparent custom-back :click-hover="false">
+      <template #headerLeft>
+        <view class="flex items-center gap-7 text-fore-subtitle">
+          <ie-image is-oss src="/volunteer/index/navbar_title.png" custom-class="w-146 h-36" />
+          <text>·</text>
+          <text class="text-30 font-medium">{{ examTypeName }}</text>
+        </view>
+      </template>
+      <template #headerRight>
+        <view class="flex items-center gap-4 text-fore-subtitle font-medium">
+          <uv-icon name="map" size="16" color="#333" />
+          <text class="text-30">{{ userStore.getLocation }}</text>
+        </view>
+      </template>
+    </ie-navbar>
+    <volunteer-banner :style="{ marginTop: (baseStickyTop + 10) + 'px' }" />
+    <volunteer-menu />
+    <ie-gap />
+    <volunteer-policy />
+    <volunteer-echelon />
+    <template #tabbar>
+      <ie-tabbar :active="1" />
+    </template>
+  </ie-page>
 </template>
 
 <script lang="ts" setup>
-import {useUserStore} from '@/store/userStore';
-import {useTransferPage} from '@/hooks/useTransferPage';
-import {EnumDictName} from '@/common/enum';
-import {useDictStore} from "@/store/dictStore";
-import {useNavbar} from "@/hooks/useNavbar";
+import { useUserStore } from '@/store/userStore';
+import { useTransferPage } from '@/hooks/useTransferPage';
+import { EnumDictName } from '@/common/enum';
+import { useDictStore } from "@/store/dictStore";
+import { useNavbar } from "@/hooks/useNavbar";
 import VolunteerBanner from "@/pagesMain/pages/volunteer/components/volunteer-banner.vue";
 import VolunteerMenu from "@/pagesMain/pages/volunteer/components/volunteer-menu.vue";
 import VolunteerPolicy from "@/pagesMain/pages/volunteer/components/volunteer-policy.vue";
 import VolunteerEchelon from "@/pagesMain/pages/volunteer/components/volunteer-tier.vue";
 
-const {transferTo} = useTransferPage();
+const { transferTo } = useTransferPage();
 const userStore = useUserStore();
 const dictStore = useDictStore()
-const {baseStickyTop} = useNavbar();
+const { baseStickyTop } = useNavbar();
 
 const examTypeName = computed(() => {
-    return dictStore.getDictLabel(EnumDictName.EXAM_TYPE, userStore.getExamType)
+  return dictStore.getDictLabel(EnumDictName.EXAM_TYPE, userStore.getExamType)
 })
 
 // 为了让子组件触发页面滚动