flat: css

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;