flat: 视频版本0.1

pages/index/components/index-one.vue

@@ -9,11 +9,11 @@
                 <view class="chart button-click">职业图谱</view>
             </view>
             <view class="cards">
-                <view class="card btn-feel" @click="navTo('/pages/nearby/nearby')">
+                <view class="card press-button" @click="navTo('/pages/nearby/nearby')">
                     <view class="card-title">附近工作</view>
                     <view class="card-text">好岗职等你来</view>
                 </view>
-                <view class="card btn-feel" @click="navTo('/packageA/pages/choiceness/choiceness')">
+                <view class="card press-button" @click="navTo('/packageA/pages/choiceness/choiceness')">
                     <view class="card-title">精选企业</view>
                     <view class="card-text">优选职得信赖</view>
                 </view>
@@ -132,6 +132,14 @@
         </view>
         <!-- 筛选 -->
         <select-filter ref="selectFilterModel"></select-filter>
+
+        <view class="maskFristEntry" v-if="maskFristEntry">
+            <view class="entry-content">
+                <text>左滑查看视频</text>
+                <image class="indicateArrow" src="/static/gif/indicateArrow.gif"></image>
+            </view>
+            <view class="maskFristEntry-Close" @click="closeFristEntry"></view>
+        </view>
     </view>
 </template>
 
@@ -153,11 +161,13 @@ import { useScrollDirection } from '@/hook/useScrollDirection';
 import { useColumnCount } from '@/hook/useColumnCount';
 const { isScrollingDown, handleScroll } = useScrollDirection();
 const recommedIndexDb = useRecommedIndexedDBStore();
+const emits = defineEmits(['onShowTabbar']);
 
 const waterfallsFlowRef = ref(null);
 const loadmoreRef = ref(null);
 const conditionSearch = ref({});
 const waterfallcolumn = ref(2);
+const maskFristEntry = ref(false);
 const state = reactive({
     tabIndex: 'all',
 });
@@ -193,6 +203,12 @@ const isLoaded = ref(false);
 //     { name: '创意总监', highlight: false },
 // ]);
 
+onLoad(() => {
+    // 判断浏览器是否有 fristEntry 第一次进入
+    let fristEntry = uni.getStorageSync('fristEntry') || true; // 默认未读
+    maskFristEntry.value = fristEntry;
+});
+
 const { columnCount, columnSpace } = useColumnCount(() => {
     pageState.pageSize = 10 * (columnCount.value - 1);
     getJobRecommend('refresh');
@@ -202,6 +218,11 @@ const { columnCount, columnSpace } = useColumnCount(() => {
     });
 });
 
+function closeFristEntry() {
+    uni.setStorageSync('fristEntry', false);
+    maskFristEntry.value = false;
+}
+
 // onLoad(() => {
 //     getJobRecommend('refresh');
 // });
@@ -286,6 +307,7 @@ function nextDetail(job) {
 
 function openFilter() {
     showFilter.value = true;
+    emits('onShowTabbar', false);
     selectFilterModel.value?.open({
         title: '筛选',
         maskClick: true,
@@ -301,6 +323,7 @@ function openFilter() {
         },
         cancel: () => {
             showFilter.value = false;
+            emits('onShowTabbar', true);
         },
     });
 }
@@ -438,6 +461,51 @@ defineExpose({ loadData });
 </script>
 
 <style lang="stylus" scoped>
+.maskFristEntry
+    position: fixed;
+    right: 20rpx;
+    bottom: calc(50% - 200rpx);
+    // background: rgba(0,0,0,0.3)
+    .entry-content
+        display: flex;
+        align-items: center
+        text
+            font-size: 36rpx
+            background: linear-gradient(273.34deg, #356CFA 3.58%, #A47FFD 85.84%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text; /* 有些浏览器兼容用 */
+            text-fill-color: transparent;
+        .indicateArrow
+            height: 76rpx
+            width: 68rpx
+    .maskFristEntry-Close
+        position: absolute;
+        left: calc(50% - 10rpx);
+        top: 86rpx
+        width: 42rpx
+        height: 42rpx
+        background: linear-gradient(273.34deg, #356CFA 3.58%, #A47FFD 85.84%);
+        border-radius: 50%;
+    .maskFristEntry-Close::before
+        position: absolute;
+        left: calc( 50% - 2rpx)
+        top: calc( 50% - 10rpx)
+        transform: rotate(45deg);
+        content: ''
+        background: #FFFFFF
+        width: 4rpx
+        height: 20rpx
+    .maskFristEntry-Close::after
+        position: absolute;
+        left: calc( 50% - 2rpx)
+        top: calc( 50% - 10rpx)
+        transform: rotate(-45deg);
+        content: ''
+        background: #FFFFFF
+        width: 4rpx
+        height: 20rpx
+
 
 .app-container
     width: 100%;