131 lines
4.7 KiB
Vue
131 lines
4.7 KiB
Vue
<template>
|
||
<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/recommendday.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/recommendday.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 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" 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: 0rpx 14rpx 14rpx 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: 100%;
|
||
height: 100%
|
||
.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>
|