学员端小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

201 lines
4.1 KiB

<template>
<view class="pageBg ">
<view class="pad">
<!-- 搜索框 -->
<view class="searchBg">
<view class="flex">
<view class="searchIcon">
<image src="@/static/images/index/searchIconHui.png" mode=""></image>
</view>
<view class="inputBox">
<u--input placeholder="搜索驾校、教练…" border="none" clearable v-model="keywords" :color="'#333'"
placeholderClass="placeholderClass"></u--input>
</view>
<view class="searchBtn">搜索</view>
</view>
</view>
<!-- 历史搜索 -->
<view class="" v-if="!keywords">
<view class="historyRecord">
<view class="h2_row">
<view class="h2">历史搜索</view>
<view class="deleteIcon">
<image src="@/static/images/index/deleteIcon.png" mode=""></image>
</view>
</view>
<view class="tag_row">
<view class="tag" v-for="(item,index) in tagArr" :key="index">{{item}}</view>
</view>
</view>
<view class="tabs">
<view class="tab" :class="{active: currentTab==1}" @click="changeTab(1)">优选驾校</view>
<view class="tab" :class="{active: currentTab==2}" @click="changeTab(2)">优选教练</view>
</view>
<view class="ul">
<view class="li">
<view class="num">1</view>
<view class="con">
<schoolItme v-show="currentTab==1" :showPhone="false"/>
<coachItem v-show="currentTab==2"/>
</view>
</view>
</view>
</view>
<!-- 真正搜索内容 -->
<view class="" v-else>
<view class="tabs">
<view class="tab" :class="{active: currentTab==1}" @click="changeTab(1)">驾校(2)</view>
<view class="tab" :class="{active: currentTab==2}" @click="changeTab(2)">教练(30)</view>
</view>
<schoolItme v-show="currentTab==1"/>
<coachItem v-show="currentTab==2"/>
</view>
</view>
</view>
</template>
<script>
import schoolItme from '../comp/schoolItem.vue'
import coachItem from '../shcoolDetail/comp/tab3.vue'
export default {
props: ['placeholder'],
components: { schoolItme, coachItem },
data() {
return {
keywords: '',
tagArr: ['翔力驾校','王一宝', '大乔'],
currentTab: 1,
}
},
methods: {
changeTab(num) {
this.currentTab = num
}
}
}
</script>
<style lang="scss" scoped>
.pad {
padding-top: 10rpx;
}
.searchBg {
background: #fff;
width: 100%;
height: 72rpx;
border-radius: 16rpx;
line-height: 72rpx;
margin-top: 10rpx;
.flex {
height: 100%;
.searchIcon {
width: 40rpx;
height: 40rpx;
margin: 0 28rpx;
}
.inputBox {
flex: 1;
color: #fff;
font-size: 28rpx;
}
}
.searchBtn {
width: 120rpx;
font-size: 28rpx;
color: $themC;
text-align: center;
position: relative;
&::before {
content: '';
width: 2rpx;
height: 24rpx;
position: absolute;
left: 0;
top: 50%;
background: #E8E9EC;
transform: translateY(-50%);
}
}
}
.placeholderClass {
color: #ADADAD !important;
}
.h2_row {
display: flex;
justify-content: space-between;
line-height: 116rpx;
.h2 {
font-size: 28rpx;
font-weight: 600;
}
}
.tag_row {
display: flex;
flex-wrap: wrap;
.tag {
padding: 8rpx 16rpx;
background: #FFFFFF;
border-radius: 28rpx;
min-width: 112rpx;
text-align: center;
color: #686B73;
margin: 0 40rpx 20rpx 0;
}
}
.tabs {
display: flex;
padding: 30rpx 0 50rpx 0;
margin-left: 20rpx;
.tab {
font-size: 28rpx;
color: #333;
margin-right: 68rpx;
&.active {
color: $themC;
position: relative;
font-weight: 600;
&::before {
position: absolute;
content: '';
background: $themC;
bottom: -20rpx;
left: 50%;
transform: translateX(-50%);
width: 112rpx;
height: 4rpx;
}
}
}
}
.li {
display: flex;
align-items: center;
.num {
width: 56rpx;
height: 36rpx;
border-radius: 4rpx;
text-align: center;
background: #ADADAD;
font-size: 28rpx;
color: #fff;
margin-right: 28rpx;
&:nth-child(1) {
background: #FF6B6D;
}
&:nth-child(2) {
background: #F18840;
}
&:nth-child(3) {
background: #FFB83E;
}
}
.con {
flex: 1;
width: 0;
}
}
</style>