85 lines
2.8 KiB
Vue
85 lines
2.8 KiB
Vue
|
<template>
|
||
|
|
<view class="app-container">
|
||
|
|
<view class="nearby-head">
|
||
|
|
<view class="head-item" :class="{ actived: state.current === 0 }" @click="changeType(0)">附近工作</view>
|
||
|
|
<view class="head-item" :class="{ actived: state.current === 1 }" @click="changeType(1)">区县工作</view>
|
||
|
|
<view class="head-item" :class="{ actived: state.current === 2 }" @click="changeType(2)">地铁周边</view>
|
||
|
|
<view class="head-item" :class="{ actived: state.current === 3 }" @click="changeType(3)">商圈附近</view>
|
||
|
|
</view>
|
||
|
|
<view class="nearby-content">
|
||
|
|
<swiper class="swiper" :current="state.current" @change="changeSwiperType">
|
||
|
|
<swiper-item class="swiper-item" disable-touch>
|
||
|
|
<oneComponent></oneComponent>
|
||
|
|
</swiper-item>
|
||
|
|
<swiper-item class="swiper-item">
|
||
|
|
<twoComponent></twoComponent>
|
||
|
|
</swiper-item>
|
||
|
|
<swiper-item class="swiper-item">
|
||
|
|
<threeComponent></threeComponent>
|
||
|
|
</swiper-item>
|
||
|
|
<swiper-item class="swiper-item">
|
||
|
|
<fourComponent></fourComponent>
|
||
|
|
</swiper-item>
|
||
|
|
</swiper>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import oneComponent from './components/one.vue';
|
||
|
|
import twoComponent from './components/two.vue';
|
||
|
|
import threeComponent from './components/three.vue';
|
||
|
|
import fourComponent from './components/four.vue';
|
||
|
|
import { reactive, inject, watch, ref, onMounted } from 'vue';
|
||
|
|
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||
|
|
const state = reactive({
|
||
|
|
current: 2,
|
||
|
|
all: [{}],
|
||
|
|
});
|
||
|
|
|
||
|
|
onLoad(() => {});
|
||
|
|
|
||
|
|
// 查看消息类型
|
||
|
|
function changeSwiperType(e) {
|
||
|
|
const currented = e.detail.current;
|
||
|
|
state.current = currented;
|
||
|
|
}
|
||
|
|
function changeType(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;
|
||
|
|
.nearby-head
|
||
|
|
height: 63rpx;
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #FFFFFF;
|
||
|
|
line-height: 63rpx;
|
||
|
|
text-align: center;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
.head-item
|
||
|
|
width: calc(100% / 4);
|
||
|
|
z-index: 9
|
||
|
|
.actived
|
||
|
|
width: 169rpx;
|
||
|
|
height: 63rpx;
|
||
|
|
background: #13C57C;
|
||
|
|
box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0,0,0,0.25);
|
||
|
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||
|
|
.nearby-content
|
||
|
|
flex: 1;
|
||
|
|
overflow: hidden;
|
||
|
|
.swiper
|
||
|
|
height: 100%;
|
||
|
|
.swiper-item
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
</style>
|