148 lines
3.1 KiB
Vue
148 lines
3.1 KiB
Vue
<template>
|
|
<view class="projects">
|
|
<view class="tabs-wrap">
|
|
<view
|
|
@click="handleTab(item.value)"
|
|
class="tab-item"
|
|
:class="{
|
|
'tab-isActived': actived === item.value
|
|
}"
|
|
v-for="(item, index) in tabs"
|
|
:key="index">
|
|
<view
|
|
:class="{
|
|
'tab-isActived': actived === item.value,
|
|
'no-actived-1': actived === 2 && item.value === 1,
|
|
'no-actived-2': actived === 1 && item.value === 2,
|
|
'no-actived-3': actived === 3 && item.value === 2,
|
|
'no-actived-4': actived === 2 && item.value === 3,
|
|
}"
|
|
>
|
|
<image class="tab-icon" :src="webUrl + '/orderIcon/' + item.icon" mode="aspectFit|aspectFill|widthFix"></image>
|
|
{{ item.name }}
|
|
<!-- <view>
|
|
<view>{{ item.name }}</view>
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view
|
|
class="content"
|
|
:class="{
|
|
'first-one': actived === 1,
|
|
'last-one': actived === 3
|
|
}"
|
|
|
|
>
|
|
<recommend v-if="actived === 1" :landmarkDataId="landmarkDataId"></recommend>
|
|
<policy v-if="actived === 2" :landmarkDataId="landmarkDataId"></policy>
|
|
<serviec v-if="actived === 3" :info="info"></serviec>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import recommend from './recommend.vue'
|
|
import policy from './policy.vue'
|
|
import serviec from './serviec.vue'
|
|
export default {
|
|
components: {
|
|
recommend,
|
|
policy,
|
|
serviec
|
|
},
|
|
props: {
|
|
landmarkDataId: null,
|
|
info: {
|
|
default:() => {}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
webUrl: this.$VUE_APP_RESOURCES_URL,
|
|
actived: 1,
|
|
tabs: [
|
|
{name: '企业推荐', value: 1, icon: 'qytj.png'},
|
|
{name: '政策', value: 2, icon: 'zc.png'},
|
|
{name: '服务', value: 3, icon: 'fw.png'},
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
handleTab(value) {
|
|
this.actived = value
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.tab-icon{
|
|
height: 30rpx;
|
|
width: 30rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
.fit-box-inner{
|
|
background: #f0f0f0;
|
|
width: initial;
|
|
height: inherit;
|
|
width: 40rpx;
|
|
}
|
|
.first-one{
|
|
border-radius: 0 24rpx 24rpx 24rpx !important;
|
|
}
|
|
.last-one{
|
|
border-radius: 24rpx 0 24rpx 24rpx !important;
|
|
}
|
|
.fit-box{
|
|
width: 40rpx;
|
|
height: initial;
|
|
background: #fff;
|
|
display: flex;
|
|
}
|
|
.projects{
|
|
padding: 20rpx;
|
|
}
|
|
.tabs-wrap{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.tab-item{
|
|
text-align: center;
|
|
flex: 1;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
background: #fff;
|
|
view{
|
|
padding: 20rpx 0;
|
|
background: #f0f0f0;
|
|
width: inherit;
|
|
height: inherit;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center
|
|
}
|
|
}
|
|
.no-actived-1{
|
|
border-radius: 0 0 24rpx 0 !important;
|
|
}
|
|
.no-actived-2{
|
|
border-radius: 0 0 0 24rpx !important;
|
|
}
|
|
.no-actived-3{
|
|
border-radius: 0 0 24rpx 0 !important;
|
|
}
|
|
.no-actived-4{
|
|
border-radius: 0 0 0 24rpx !important;
|
|
}
|
|
.tab-isActived{
|
|
background: #fff !important;
|
|
border-radius: 24rpx 24rpx 0 0 !important;
|
|
position: relative;
|
|
}
|
|
.content{
|
|
background: #fff;
|
|
padding: 20rpx 10rpx;
|
|
border-radius: 24rpx;
|
|
}
|
|
</style> |