sdz/ks-app-employment-service
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

flat: 修改字体和添加图标

Browse Source
This commit is contained in:
史典卓
2025-07-09 15:15:37 +08:00
parent 36798d3054
commit 645c2552f6
45 changed files with 518 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
pages/index/index.vue
View File

@@ -27,7 +27,18 @@
</swiper-item>
</swiper>
</view>
<Tabbar v-show="showTabbar" :currentpage="0"></Tabbar>
<!-- maskFristEntry -->
<view class="maskFristEntry" v-if="maskFristEntry">
<view class="entry-content">
<text class="text1">左滑查看视频</text>
<text class="text2">快去体验吧～</text>
<view class="goExperience" @click="goExperience">去体验</view>
<view class="maskFristEntry-Close" @click="closeFristEntry">1</view>
</view>
</view>
</view>
</view>
</template>
@@ -45,11 +56,20 @@ import { storeToRefs } from 'pinia';
import { useReadMsg } from '@/stores/useReadMsg';
const { unreadCount } = storeToRefs(useReadMsg());
const showTabbar = ref(true);
const maskFristEntry = ref(false);
onLoad(() => {
// 判断浏览器是否有 fristEntry 第一次进入
// let fristEntry = uni.getStorageSync('fristEntry') === false ? false : true; // 默认未读
// maskFristEntry.value = fristEntry ;
maskFristEntry.value = true;
});
onShow(() => {
// 获取消息列表
useReadMsg().fetchMessages();
});
const state = reactive({
current: 0,
all: [{}],
@@ -69,7 +89,7 @@ function changeShowTabbar(val) {
showTabbar.value = val;
}
// 查看消息类型
//1 查看消息类型
function changeSwiperType(e) {
const index = e.detail.current;
state.current = index;
@@ -87,11 +107,20 @@ function handleTabChange(index) {
}
}
// 查看消息类型
function changeSwiperMsgType(e) {
const currented = e.detail.current;
state.current = currented;
}
// mask
function closeFristEntry() {
uni.setStorageSync('fristEntry', false);
maskFristEntry.value = false;
}
function goExperience() {
closeFristEntry();
state.current = 1;
}
</script>
<style lang="stylus" scoped>
@@ -170,4 +199,86 @@ function changeSwiperMsgType(e) {
width: 100%
display: flex;
flex-direction: column;
// mask:
.maskFristEntry
position: fixed;
// right: 20rpx;
// bottom: calc(50% - 200rpx);
height: 100vh
width: 100vw
background: rgba(0,0,0,0.3)
.entry-content
display: flex;
align-items: center
position: absolute
left: 50%
top: 35%
transform: translate(-50%, -50%)
flex-direction: column
background: url('@/static/imgs/fristEntry.png') 0 0 no-repeat;
background-size: 100% 100%;
width: 480rpx
height: 584rpx
// padding-left: 80rpx
.text1
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
margin-top: 370rpx
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;
padding-left: 28rpx
.text2
padding-left: 28rpx
margin-top: 8rpx
font-size: 20rpx;
color: #666666;
text-align: center;
.indicateArrow
height: 76rpx
width: 68rpx
.indicatefristEntry
width: 244rpx
height: 244rpx
.goExperience
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
margin-left: 28rpx
margin-top: 28rpx
width: 160rpx;
height: 60rpx;
background: linear-gradient( 180deg, #9974FD 0%, #286BFA 100%);
border-radius: 12rpx 12rpx 12rpx 12rpx;
font-size: 28rpx;
color: #FFFFFF;
text-align: center;
line-height: 60rpx
.maskFristEntry-Close
position: absolute;
left: calc(50% - 10rpx);
bottom: -130rpx
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
</style>