<template>
|
<view class="box">
|
<view class="cate">
|
<view class="cate-item active">
|
获客类
|
<view class="cate-item-xian"></view>
|
</view>
|
<view class="cate-item">市场类</view>
|
<view class="cate-item">设计类</view>
|
<view class="cate-item">培训类</view>
|
</view>
|
<view class="content">
|
<image class="wu" src="/static/default_noranking@2x.png" mode="widthFix"></image>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
|
};
|
}
|
}
|
</script>
|
|
<style>
|
page {
|
background-color: #f7f7f7;
|
}
|
</style>
|
<style lang="scss" scoped>
|
.box {
|
width: 100%;
|
.content {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
.wu {
|
width: 200rpx;
|
height: 200rpx;
|
margin-top: 200rpx;
|
}
|
}
|
.cate {
|
width: 100%;
|
height: 88rpx;
|
display: flex;
|
align-items: center;
|
background: #FFFFFF;
|
position: sticky;
|
top: 0;
|
left: 0;
|
z-index: 9;
|
.active {
|
color: #2E68C4 !important;
|
}
|
.cate-item {
|
flex: 1;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #666666;
|
position: relative;
|
.cate-item-xian {
|
position: absolute;
|
bottom: 0;
|
left: 50%;
|
transform: translate(-50%, 0);
|
width: 40rpx;
|
height: 6rpx;
|
background: #2E68C4;
|
border-radius: 3rpx;
|
}
|
}
|
}
|
}
|
</style>
|
