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:
史典卓
2024-11-18 16:33:37 +08:00
parent cf8fc80b20
commit ad4eb162a5
83 changed files with 8250 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
pages/msglog/msglog.vue
View File

@@ -1,19 +1,131 @@
<template>
<view>
<view class="app-container">
<view class="msg-AI">AI+就业服务程序</view>
<view class="msg-tab">
<view class="msg-tab-item" :class="{ actived: state.current === 0 }" @click="seemsg(0)">全部</view>
<view class="msg-tab-item" :class="{ actived: state.current === 1 }" @click="seemsg(1)">未读</view>
</view>
<view class="msg-list">
<swiper class="swiper" :current="state.current" @change="changeSwiperMsgType">
<swiper-item class="list">
<view class="list-card">
<view class="card-img">
<image class="card-img-flame" src="/static/icon/flame2.png"></image>
</view>
<view class="card-info">
<view class="info-title">今日推荐</view>
<view class="info-text">这里有9个职位很适合你，快来看看吧</view>
</view>
<view class="card-time">刚才</view>
</view>
</swiper-item>
<swiper-item class="list">
<view class="list-card">
<view class="card-img">
<image class="card-img-flame" src="/static/icon/flame2.png"></image>
</view>
<view class="card-info">
<view class="info-title">今日推荐</view>
<view class="info-text">这里有9个职位很适合你，快来看看吧</view>
</view>
<view class="card-time">刚才</view>
</view>
</swiper-item>
</swiper>
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
}
}
<script setup>
import { reactive, inject, watch, ref, onMounted } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
const state = reactive({
current: 0,
all: [{}],
});
onLoad(() => {});
// 查看消息类型
function changeSwiperMsgType(e) {
const currented = e.detail.current;
state.current = currented;
}
function seemsg(index) {
state.current = index;
}
</script>
<style lang="stylus">
<style lang="stylus" scoped>
.app-container
width: 100%;
height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
background: linear-gradient( 180deg, #4778EC 0%, #002979 100%);
display: flex;
flex-direction: column;
.msg-AI
height: 42rpx;
font-family: Inter, Inter;
font-weight: 400;
font-size: 35rpx;
color: #FFFFFF;
line-height: 41rpx;
padding: 85rpx 0 0 30rpx;
.msg-tab
padding: 85rpx 0 0 30rpx;
display: flex;
justify-content: flex-start;
align-items: center;
color: #D9D9D9;
.msg-tab-item
margin-right: 40rpx;
.actived
font-size: 28rpx;
color: #FFFFFF;
text-shadow: 0px 7px 7px rgba(0,0,0,0.25);
.msg-list
flex: 1;
overflow: hidden;
.swiper
height: 100%;
.list
display: flex;
flex-direction: column;
.list-card
height: calc(119rpx - 26rpx - 26rpx);
width: calc(100% - 36rpx - 36rpx - 23rpx - 23rpx);
background: #FFFFFF;
border-radius: 17rpx;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 26rpx 36rpx;
margin: 36rpx 23rpx;
.card-img
width: 63rpx;
height: 63rpx;
background: #D9D9D9;
border-radius: 50%
display: grid;
place-items: center;
margin-right: 30rpx;
.card-img-flame
width: 36rpx;
height: 44rpx;
.card-info
flex: 1;
display: flex;
align-items: flex-start;
flex-direction: column;
.info-title
font-weight: 400;
font-size: 28rpx;
color: #000000;
.info-text
font-size: 17rpx;
color: #606060;
.card-time
font-size: 17rpx;
color: #606060;
</style>