|
|
@@ -1,28 +1,233 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
- 零工信息
|
|
|
- <tabbar ref="mytabbar"
|
|
|
+ <u-navbar back-text="零工驿站" back-icon-size="28" back-icon-color="#ffffff"
|
|
|
+ :background="{backgroundColor: '#2795FD',}" :back-text-style="{color: '#ffffff'}"></u-navbar>
|
|
|
+
|
|
|
+ <!-- 搜索框 -->
|
|
|
+ <view class="search">
|
|
|
+ <view class="search-box">
|
|
|
+ <view class="option">
|
|
|
+ <nxsearch :selectList="selectList" button="inside" @search="doSearch" @confirm="doSearc"
|
|
|
+ v-model="searchQuery.keyword" placeholder="输入关键字找工作" />
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 搜索结果 -->
|
|
|
+ <view class="result">
|
|
|
+ <view class="result-item" v-for="item in 3">
|
|
|
+ <!-- 照片 -->
|
|
|
+ <view class="photo">
|
|
|
+ <img src="../../assets/img/informationPhoto.png" alt="">
|
|
|
+ </view>
|
|
|
+ <view class="content">
|
|
|
+ <!-- 职位薪水 -->
|
|
|
+ <view class="top">
|
|
|
+ <view class="position">
|
|
|
+ 司机/保安/普工/地推
|
|
|
+ </view>
|
|
|
+ <view class="salary">
|
|
|
+ 120元/天
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="issuer">
|
|
|
+ 李先生
|
|
|
+ </view>
|
|
|
+ <view class="bottom">
|
|
|
+ <view class="tags">
|
|
|
+ <view class="tag-item">
|
|
|
+ 男
|
|
|
+ </view>
|
|
|
+ <view class="tag-item">
|
|
|
+ 21岁
|
|
|
+ </view>
|
|
|
+ <view class="tag-item">
|
|
|
+ 高中
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="date">
|
|
|
+ 更新时间：2023-06-01
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+<tabbar ref="mytabbar"
|
|
|
:current="3"></tabbar>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import tabbar from "../../components/Tabbar.vue"
|
|
|
+ import nxsearch from "../../components/nx-search.vue"
|
|
|
+import tabbar from "../../components/Tabbar.vue"
|
|
|
export default {
|
|
|
components: {
|
|
|
+ nxsearch,
|
|
|
tabbar
|
|
|
},
|
|
|
+
|
|
|
data() {
|
|
|
return {
|
|
|
-
|
|
|
+ keyword: '',
|
|
|
+ searchQuery: {
|
|
|
+ keyword: '',
|
|
|
+ selectIndex: 0
|
|
|
+ },
|
|
|
+ selectList: [{
|
|
|
+ id: 1,
|
|
|
+ name: '找工作'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ name: '找公司'
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ tabList: [{
|
|
|
+ name: '最新'
|
|
|
+ }, {
|
|
|
+ name: '日结'
|
|
|
+ }],
|
|
|
+
|
|
|
+ current: 0
|
|
|
+
|
|
|
+
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ // 执行搜索
|
|
|
+ doSearch(searchQuery) {
|
|
|
+ console.log('searchQuery', searchQuery);
|
|
|
+ },
|
|
|
+ change(index) {
|
|
|
+ this.current = index;
|
|
|
+ }
|
|
|
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ page {
|
|
|
+ background: #F0F0F2;
|
|
|
+ padding-bottom: 50px;
|
|
|
+ }
|
|
|
+ .search {
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 16rpx 32rpx;
|
|
|
+
|
|
|
+ .search-box {
|
|
|
+ border-radius: 50px;
|
|
|
+
|
|
|
+ height: 72rpx;
|
|
|
+ line-height: 72rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 搜索结果
|
|
|
+ .result{
|
|
|
+ background-color: #fff;
|
|
|
+ .tabs{
|
|
|
+ padding-right:32rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom:1px solid #f1f1f1;
|
|
|
+ .left{
|
|
|
+ width: 33%;
|
|
|
+ /deep/.u-tabs{
|
|
|
+ background-color: #fff !important;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .screen{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: rgba(39, 149, 253, 1);
|
|
|
+ font-size: 16px;
|
|
|
+ img{
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-right: 4rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .result-item{
|
|
|
+ padding: 32rpx 0;
|
|
|
+ margin:0 32rpx;
|
|
|
+ display: flex;
|
|
|
+ border-bottom:1px solid #f1f1f1;
|
|
|
+ // 照片
|
|
|
+ .photo{
|
|
|
+ width: 96rpx;
|
|
|
+ height:96rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ border-radius: 50px;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 1);
|
|
|
+ img{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content{
|
|
|
+ margin-left: 24rpx;
|
|
|
+ flex:1;
|
|
|
+ // 职位薪水
|
|
|
+ .top{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 36rpx;
|
|
|
+ .position{
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+
|
|
|
+ font-family: 'PingFangSC-medium';
|
|
|
+ }
|
|
|
+ .salary{
|
|
|
+ color: rgba(255, 61, 0, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 发布人
|
|
|
+ .issuer{
|
|
|
+ margin-top:16rpx;
|
|
|
+ }
|
|
|
+ // 标签和时间
|
|
|
+ .bottom{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-top:24rpx;
|
|
|
+ .tags{
|
|
|
+ display: flex;
|
|
|
+ .tag-item{
|
|
|
+ padding:0 16rpx ;
|
|
|
+ height: 36rpx;
|
|
|
+ line-height: 36rpx;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: rgba(241, 241, 247, 1);
|
|
|
+ color: rgba(129, 127, 153, 1);
|
|
|
+ font-size: 24rpx;
|
|
|
+ text-align: center;
|
|
|
+ margin-right: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .date{
|
|
|
+ color: rgba(153, 153, 153, 1);
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
|
-</style>
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+</style>
|
