wyh
/
bingyu-mini
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
bingyu-mini/bingyu/pages/caseSelect/caseSelect.vue

293 lines
7.9 KiB
Vue
Raw Permalink Blame History

<template>
<view>
<navs :top='top' :color='color'></navs>
<view class="caseBox">
<view class="search">
<view class="left">
<text class="iconfont icon-SearchBar" style="margin-left: 26rpx;margin-right: 34rpx; color: #4B4E5D;"></text>
<input class="uni-input" placeholder-style="color:#C2C2C2" placeholder="输入项目类型" />
</view>
<view class="selectbtn" @click="toggle()">
<image src="@/static/image/Group4526.svg" mode=""></image>
</view>
</view>
<uni-popup ref="popup" type="bottom" :animation="false" background-color="#fff">
<navs :top='top' :color='color'></navs>
<view class="allsel">
<view class="sel-left">
<view class="category" :class="popIndex==0?'active':''" @click="popSel(0)">全部</view>
<view class="category" :class="popIndex==1?'active':''" @click="popSel(1)">开发</view>
<view class="category" :class="popIndex==2?'active':''" @click="popSel(2)">设计</view>
<view class="category" :class="popIndex==3?'active':''" @click="popSel(3)">拍摄</view>
</view>
<view class="sel-right">
<view class="classification" v-for="(item,index) in navList" :key="item.text" @click="popSel2(index)">
<view v-if="item.text=='logo设计'" style="height: 32rpx;">
<image src="@/static/image/VectorStroke-2.svg" mode="" style="width: 32rpx;height: 32rpx;"></image>
</view>
<view :class="item.name" v-else></view>
<view class="classify-text">{{item.text}}</view>
</view>
</view>
</view>
</uni-popup>
<view style="padding-left: 30rpx;margin-top: 42rpx;">
<scroll-view :show-scrollbar="false" class="screen" scroll-x="true">
<view :class="select==index?'item active':'item'" v-for="(item,index) in navList" :key="item.text" @click="sel(index)">
<view v-if="item.text == 'logo设计'" style="position: relative;padding-left: 32rpx;">
<image :src="select==index?'../../static/image/VectorStroke-1.svg':'../../static/image/VectorStroke-2.svg'" mode="" style="position: absolute; left: 0;"></image>
<text style="margin-left: 9rpx;">{{item.text}}</text>
</view>
<view v-else>
<text :class="item.name"></text>
<text style="margin-left: 9rpx;">{{item.text}}</text>
</view>
</view>
</scroll-view>
</view>
<view class="product">
<view class="product-item" @click="goTo()">
<image src="https://img2.baidu.com/it/u=419111865,3225914506&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" mode=""></image>
<view>
<text class="bg-blue">开发</text>
<text>xxxx小程序</text>
</view>
</view>
<view class="product-item">
<image src="https://img2.baidu.com/it/u=3625112638,614874177&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500" mode=""></image>
<view>
<text class="bg-blue">开发</text>
<text>xxxx小程序</text>
</view>
</view>
<view class="product-item">
<image src="http://t14.baidu.com/it/u=3416681815,520803445&fm=224&app=112&f=JPEG?w=500&h=500" mode=""></image>
<view>
<text class="bg-green">设计</text>
<text>xxxx小程序</text>
</view>
</view>
<view class="product-item">
<image src="https://img0.baidu.com/it/u=745259874,3861833027&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=510" mode=""></image>
<view>
<text class="bg-blue">开发</text>
<text>xxxx小程序</text>
</view>
</view>
<view class="product-item">
<image src="https://img2.baidu.com/it/u=3625112638,614874177&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500" mode=""></image>
<view>
<text class="bg-blue">开发</text>
<text>xxxx小程序</text>
</view>
</view>
<view class="product-item">
<image src="http://t14.baidu.com/it/u=3416681815,520803445&fm=224&app=112&f=JPEG?w=500&h=500" mode=""></image>
<view>
<text class="bg-green">设计</text>
<text>xxxx小程序</text>
</view>
</view>
</view>
<bottoms></bottoms>
</view>
</view>
</template>
<script>
export default {
data() {
return {
top:0,
color:1,
navList:[{text:'全部',name:'iconfont icon-dashboard-3--app-application-dashboard-home-layout-vertical'},{text:'系统开发',name:'iconfont icon-Vector-14'},{text:'APP',name:'iconfont icon-Vector-1-2'},
{text:'小程序',name:'iconfont icon-Vector-2-1'},{text:'3D建模',name:'iconfont icon-Vector-3-1'},
{text:'网站',name:'iconfont icon-Vector-5-2'},{text:'logo设计',name:'iconfont icon-Vector-3-1'},
{text:'识别设计',name:'iconfont icon-Vector-8'},{text:'包装设计',name:'iconfont icon-Vector-7'},
{text:'宣传品设计',name:'iconfont icon-Vector-6'},{text:'UI设计',name:'iconfont icon-Vector-5'},
{text:'动漫游戏设计',name:'iconfont icon-Group4525'},{text:'视频拍摄',name:'iconfont icon-VectorStroke-1'},
{text:'照片拍摄',name:'iconfont icon-Vector-9'},],
select:0,
popIndex:0,
};
},
onLoad() {
this.top = uni.getMenuButtonBoundingClientRect().top;
},
methods:{
sel(i){
this.select = i;
},
toggle() {
this.$refs.popup.open('top')
},
popSel(i){//弹出层左边选项
this.popIndex = i;
},
popSel2(i){//弹出层右边选项
this.select = i;
this.$refs.popup.close()
},
goTo(){
uni.navigateTo({
url:'/pages/caseDetail/caseDetail'
})
}
}
}
</script>
<style lang="scss">
.caseBox{
padding: 23rpx 0 34rpx;
}
.search{
display: flex;
justify-content: space-between;
padding: 0 30rpx;
.left{
flex: 1;
line-height: 80rpx;
background-color: #FAFBFD;
border-radius: 40rpx;
display: flex;
.uni-input{
flex: 1;
height: 100%;
font-size: 28rpx;
}
}
.selectbtn{
width: 80rpx;
height: 80rpx;
border-radius: 50%;
background-color: #494949;
margin-left: 28rpx;
display: flex;
justify-content: center;
align-items: center;
image{
width: 36rpx;
height: 32rpx;
}
}
}
.screen{
white-space: nowrap;
width: 100%;
margin-bottom: 39rpx;
}
.item{
display: inline-block;
border-radius: 50rpx;
padding: 15rpx 35rpx;
color: #333;
font-size: 22rpx;
image{
width: 32rpx;
height: 32rpx;
}
}
.item.active{
background-color: #494949;
color: #fff;
}
.product{
display: flex;
flex-wrap: wrap;
padding: 0 30rpx;
.product-item{
width: 332rpx;
margin-right: 26rpx;
margin-bottom: 45rpx;
&:nth-child(2n){
margin-top: 48rpx;
margin-right: 0;
margin-bottom: 0;
}
image{
width: 332rpx;
height: 280rpx;
border-radius: 40rpx;
margin-bottom: 12rpx;
}
view{
display: flex;
align-items: center;
}
text{
&:first-child{
font-size: 20rpx;
font-weight: 500;
padding: 5rpx;
}
&:last-child{
margin-left: 11rpx;
font-size: 30rpx;
font-weight: 500;
color: #333;
}
}
.bg-blue{
color: #3887FD;
background-color: #EEF1FF;
}
.bg-green{
color: #6FCC26;
background-color: #EEFEE7;
}
}
}
.allsel{
display: flex;
margin-top: 26rpx;
padding-bottom: 56rpx;
.sel-left{
padding-left: 30rpx;
.category{
width: 140rpx;
height: 68rpx;
border-radius: 10rpx;
background-color: #FAFAFA;
color: #999999;
font-size: 26rpx;
font-weight: 500;
text-align: center;
line-height: 68rpx;
margin-top: 16rpx;
&:first-child{
margin-top: 0;
}
}
.category.active{
background-color: #494949;
color: #fff;
}
}
.sel-right{
flex: 1;
display: flex;
flex-wrap: wrap;
.classification{
width: 33.3%;
text-align: center;
color: #333;
font-size: 26rpx;
margin-top: 52rpx;
&:nth-child(1){
margin-top: 0;
}
&:nth-child(2){
margin-top: 0;
}
&:nth-child(3){
margin-top: 0;
}
}
.classify-text{
margin-top: 14rpx;
}
}
}
</style>
Reference in New Issue View Git Blame Copy Permalink