odjbin/city-store-transfer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

罗世杰：fix：修改样式

Browse Source
This commit is contained in:
LuoShijie
2023-11-09 14:10:42 +08:00
parent 1c784ea35a
commit 87c0c73cf5
5 changed files with 90 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
components/DropDown/DropDown.vue
View File

@@ -1,12 +1,21 @@
<template>
<view class="container">
<view
class="title-view"
v-for="item in title"
>
<text>{{item}}</text>
<view class="arrow">
<u-image src="/static/dropdown/dp_icon_lxia.png" width="14rpx" height="11rpx"/>
<view class="tabs">
<view
class="title-view"
v-for="(item, index) in title"
@click="changeActiveIndex(index)"
:class="{isActive: activeIndex === index}"
>
<text>{{item}}</text>
<!-- <text>{{index}}</text> -->
<view class="arrow" v-if="activeIndex !== index">
<u-image src="/static/dropdown/dp_icon_lxia.png" width="14rpx" height="11rpx"/>
</view>
<view class="arrow" v-if="activeIndex === index">
<u-image src="/static/dropdown/dp_icon_hlxia.png" width="14rpx" height="11rpx"/>
</view>
</view>
</view>
@@ -18,33 +27,48 @@
name:"DropDown",
data() {
return {
title: ['行业','区域','面积','筛选']
title: ['行业','区域','面积','筛选'],
activeIndex: -1
};
},
methods: {
changeActiveIndex(index){
if(this.activeIndex === index){
this.activeIndex = -1;
}
this.activeIndex = index
}
}
}
</script>
<style lang="scss" scoped>
.container{
height: 100rpx;
background-color: #fff;
display: flex;
justify-content: space-around;
.title-view {
display: flex;
>text {
font-size: 14px;
.isActive{
color: #CC3333;
}
.container{
.tabs{
background-color: #fff;
height: 100rpx;
display: flex;
justify-content: space-around;
}
.title-view {
display: flex;
>text {
font-size: 14px;
display: flex;
flex-direction: column;
justify-content: center;
}
}
.arrow {
margin-left: 8rpx;
display: flex;
flex-direction: column;
justify-content: center;
}
}
.arrow {
margin-left: 8rpx;
display: flex;
flex-direction: column;
justify-content: center;
}
}
</style>