flat: css

pages/careerfair/careerfair.vue

@@ -4,12 +4,12 @@
             <!-- 顶部头部区域 -->
             <view class="container-header">
                 <view class="header-top">
-                    <view class="header-btnLf button-click" @click="seemsg(0)" :class="{ active: state.current === 0 }">
+                    <!--                    <view class="header-btnLf button-click" @click="seemsg(0)" :class="{ active: state.current === 0 }">
                         现场招聘
                     </view>
                     <view v-if="!isMachineEnv" class="header-btnLf button-click" @click="seemsg(1)" :class="{ active: state.current === 1 }">
                         VR虚拟招聘会
-                    </view>
+                    </view> -->
                 </view>
                 <view class="header-input btn-feel">
                     <my-icons class="iconsearch" color="#666666" type="search" size="36"></my-icons>
@@ -116,18 +116,18 @@ const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());
 import useUserStore from '@/stores/useUserStore';
 const { isMachineEnv } = storeToRefs(useUserStore());
 const { $api, navTo, cloneDeep, debounce } = inject('globalFunction');
-import useScreenStore from '@/stores/useScreenStore'
+import useScreenStore from '@/stores/useScreenStore';
 
-const screenStore = useScreenStore()
-const showTabbar = ref(false)
+const screenStore = useScreenStore();
+const showTabbar = ref(false);
 
 watch(
     () => screenStore.isWideScreen,
     (newVal) => {
-        showTabbar.value = newVal
+        showTabbar.value = newVal;
     },
     { immediate: true }
-)
+);
 
 const weekList = ref([]);
 const fairList = ref([]);
@@ -582,4 +582,4 @@ function getNextDates({ startDate = '', count = 6 }) {
         margin-top: 0
     }
 }
-</style>
+</style>

pages/index/components/index-refactor.vue

@@ -9,7 +9,8 @@
         <view class="nav-hidden">
             <view class="container-search">
                 <!-- <image class="bg-text" mode="widthFix" src="@/static/icon/index-text-bg.png"></image> -->
-                <image class="bg-text" mode="widthFix" src="@/static/imgs/shihezi.jpg"></image>
+                <image class="bg-text" mode="scaleToFill" src="@/static/imgs/shihezi.jpg"></image>
+                <view class="gradient-overlay"></view>
                 <view class="search-inner">
                     <view class="inner-left">
                         <!-- <image
@@ -434,7 +435,7 @@ const handleItemClick = (item) => {
             // lightAppJssdk.navigation.hide({
             //     url: config.Quality_assessment_URL,
             // });
-			navTo('/packageA/pages/rightsProtectionApplication/rightsProtectionApplication')
+            navTo('/packageA/pages/rightsProtectionApplication/rightsProtectionApplication');
             break;
         case '就业指导':
             lightAppJssdk.navigation.hide({
@@ -819,6 +820,16 @@ defineExpose({ loadData });
 //             width: 4rpx
 //             height: 20rpx
 
+.gradient-overlay {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 100px;
+  background: linear-gradient(to top, rgba(255, 255, 255, 0.8), transparent);
+  pointer-events: none;
+}
+
 .app-container
     width: 100%;
     height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
@@ -834,9 +845,10 @@ defineExpose({ loadData });
     padding:60rpx 0 0rpx;
     position: relative
     .bg-text
-        position :absolute
+        position: absolute;
         width:100%;
-        top:10%;
+        height: 100%;
+        top: 0%;
         left:0
     .search-inner
         position relative;