191 lines
7.1 KiB
Vue
191 lines
7.1 KiB
Vue
<template>
|
|
<scroll-view :scroll-y="true" class="nearby-scroll">
|
|
<view class="two-head">
|
|
<view class="head-item active">市北区</view>
|
|
<view class="head-item">市北区</view>
|
|
<view class="head-item">市北区</view>
|
|
<view class="head-item">市北区</view>
|
|
<view class="head-item">市北区</view>
|
|
<view class="head-item">市北区</view>
|
|
<view class="head-item">市北区</view>
|
|
<view class="head-item">市北区</view>
|
|
<view class="head-item">市北区</view>
|
|
<view class="head-item">市北区</view>
|
|
</view>
|
|
<view class="nearby-list">
|
|
<view class="list-head" @touchmove.stop.prevent>
|
|
<view class="tab-options">
|
|
<scroll-view :scroll-x="true" :show-scrollbar="false" class="tab-scroll">
|
|
<view class="tab-op-left">
|
|
<view class="tab-list" v-for="(item, index) in 4" :key="index">中国万岁</view>
|
|
<uni-icons type="plusempty" style="margin-right: 10rpx" size="20"></uni-icons>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="tab-op-right">
|
|
<view class="tab-recommend">推荐</view>
|
|
<view class="tab-filter">
|
|
<view class="tab-number">1000+</view>
|
|
<image class="image" src="/static/icon/filter.png"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="one-cards">
|
|
<view class="card-box" v-for="(item, index) in 20" :key="index">
|
|
<view class="box-row mar_top0">
|
|
<view class="row-left">销售工程师-高级销售经理</view>
|
|
<view class="row-right">1万-2万</view>
|
|
</view>
|
|
<view class="box-row">
|
|
<view class="row-left">
|
|
<view class="row-tag">本科</view>
|
|
<view class="row-tag">1-5年</view>
|
|
</view>
|
|
</view>
|
|
<view class="box-row mar_top0">
|
|
<view class="row-item mineText">2024.1.8</view>
|
|
<view class="row-item mineText">8人</view>
|
|
<view class="row-item mineText textblue">匹配度93%</view>
|
|
<view class="row-item">
|
|
<uni-icons type="star" size="28"></uni-icons>
|
|
<!-- <uni-icons type="star-filled" color="#FFCB47" size="30"></uni-icons> -->
|
|
</view>
|
|
</view>
|
|
<view class="box-row">
|
|
<view class="row-left mineText">湖南沃森电气科技有限公司</view>
|
|
<view class="row-right mineText">青岛 青岛经济技术开发区 550m</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, inject, watch, ref, onMounted } from 'vue';
|
|
const state = reactive({});
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
.nearby-scroll
|
|
overflow: hidden;
|
|
.two-head
|
|
margin: 24rpx;
|
|
padding: 26rpx;
|
|
background: #FFFFFF;
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
grid-column-gap: 40rpx;
|
|
grid-row-gap: 30rpx;
|
|
border-radius: 17rpx 17rpx 17rpx 17rpx;
|
|
.head-item
|
|
min-width: 129rpx;
|
|
height: 44rpx;
|
|
line-height: 44rpx;
|
|
text-align: center;
|
|
width: fit-content;
|
|
background: #D9D9D9;
|
|
border-radius: 17rpx 17rpx 17rpx 17rpx;
|
|
font-size: 21rpx;
|
|
color: #606060;
|
|
.active
|
|
background: #4778EC;
|
|
color: #FFFFFF;
|
|
.nearby-list
|
|
margin-top: 40rpx;
|
|
background: linear-gradient( 180deg, #4778EC 0%, #002979 100%);
|
|
.list-head
|
|
height: 77rpx;
|
|
background-color: #FFFFFF;
|
|
border-radius: 17rpx 17rpx 0rpx 0rpx;
|
|
position: relative;
|
|
top: -17rpx;
|
|
z-index: 9999;
|
|
.tab-options
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 77rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 17rpx 17rpx 0rpx 0rpx;
|
|
padding: 0 24rpx;
|
|
overflow: hidden;
|
|
.tab-scroll
|
|
height: 77rpx;
|
|
line-height: 77rpx;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
padding-right: 10rpx;
|
|
.tab-op-left
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: nowrap;
|
|
.tab-list
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
margin-right: 30rpx;
|
|
font-size: 28rpx;
|
|
color: #606060;
|
|
.tab-op-right
|
|
display: flex;
|
|
align-items: center;
|
|
.tab-recommend
|
|
white-space: nowrap;
|
|
width: 92rpx;
|
|
height: 42rpx;
|
|
background: #4778EC;
|
|
border-radius: 17rpx 17rpx 0rpx 17rpx;
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
font-size: 21rpx;
|
|
line-height: 42rpx;
|
|
margin-right: 12rpx;
|
|
.tab-number
|
|
font-size: 21rpx;
|
|
color: #606060;
|
|
line-height: 25rpx;
|
|
text-align: center;
|
|
.tab-filter
|
|
display: flex;
|
|
.image
|
|
width: 28rpx;
|
|
height: 27rpx;
|
|
|
|
.one-cards
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 20rpx;
|
|
.card-box
|
|
width: calc(100% - 36rpx - 36rpx);
|
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 17rpx;
|
|
padding: 15rpx 36rpx;
|
|
margin-top: 24rpx;
|
|
.box-row
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 8rpx;
|
|
align-items: center;
|
|
.mineText
|
|
font-weight: 400;
|
|
font-size: 21rpx;
|
|
color: #606060;
|
|
.textblue
|
|
color: #4778EC;
|
|
.row-left
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.row-tag
|
|
background: #13C57C;
|
|
border-radius: 17rpx 17rpx 17rpx 17rpx;
|
|
font-size: 21rpx;
|
|
color: #FFFFFF;
|
|
line-height: 25rpx;
|
|
text-align: center;
|
|
padding: 4rpx 8rpx;
|
|
margin-right: 23rpx;
|
|
.card-box:first-child
|
|
margin-top: -14rpx;
|
|
</style>
|