罗世杰:fix:修改样式

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

View File

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

View File

@@ -1,8 +1,18 @@
<template> <template>
<view class="root">
</view>
</template> </template>
<script> <script>
</script> </script>
<style> <style lang="scss" scoped>
.root {
width: 100%;
height: calc(100% - 300rpx);
background-color: magenta;
position: absolute;
z-index: 4;
}
</style> </style>

View File

@@ -1,7 +1,7 @@
<template> <template>
<view class="list-border"> <view class="list-border">
<view class="list-container"> <view class="list-container" @click="enterDetail()">
<view class="shop-list-img"> <view class="shop-list-img" >
<u-image width="80px" height="80px" :src="shopInfo.imageUrl" radius="8px"></u-image> <u-image width="80px" height="80px" :src="shopInfo.imageUrl" radius="8px"></u-image>
</view> </view>
<view class="text-area"> <view class="text-area">
@@ -87,7 +87,10 @@
<script> <script>
/** /**
* @property shopInfo {Object} 传入商铺对象数据 * @property {Object} shopInfo 传入商铺对象数据
* @property {Number} showStyle 展示商铺的样式类型(0为首页默认)
* @property {Boolean} isADshow 是否显示推广广告
* @property {Boolean} isEdit 是否显示编辑和删除
*/ */
export default { export default {
props: { props: {
@@ -135,6 +138,11 @@
}, },
handleDel(shopid) { handleDel(shopid) {
this.$emit('delItem', shopid) this.$emit('delItem', shopid)
},
enterDetail(){
uni.navigateTo({
url: '/pages/detail/detail'
})
} }
} }
} }

View File

@@ -1,12 +1,14 @@
<template> <template>
<view class="root"> <view class="root">
<InputAndSwiper></InputAndSwiper> <InputAndSwiper></InputAndSwiper>
<view class="content">
<view style="margin-top: 10px;"> <view style="margin-top: 10px;">
<DropDown></DropDown> <DropDown></DropDown>
</view>
<SearchShopList :showStyle="1"></SearchShopList>
</view> </view>
<SearchShopList :showStyle="1"></SearchShopList>
<TabBar :current-page="3"></TabBar> <TabBar :current-page="3"></TabBar>
</view> </view>
</template> </template>
@@ -28,7 +30,7 @@
page { page {
background-color: $uni-bg-color-grey; background-color: $uni-bg-color-grey;
} }
.root{ .content{
margin: 0 10px; margin: 0 10px;
} }
</style> </style>

View File

@@ -2,43 +2,27 @@
<view class="root"> <view class="root">
<InputAndSwiper></InputAndSwiper> <InputAndSwiper></InputAndSwiper>
<view style="margin-top: 10px;"> <view class="content">
<DropDown></DropDown> <view style="margin-top: 10px;">
<DropDown></DropDown>
</view>
<ShowShopList :showStyle="1"></ShowShopList>
</view> </view>
<DropDownItem></DropDownItem>
<ShowShopList :showStyle="1"></ShowShopList>
<TabBar :current-page="1"></TabBar> <TabBar :current-page="1"></TabBar>
</view> </view>
</template> </template>
<script> <script>
import DropDownItem from "@/components/DropDown/DropDownItem.vue"
export default { export default {
components: {
DropDownItem
},
data() { data() {
return { return {
value1: 1,
value2: 2,
options1: [{
label: '默认排序',
value: 1,
},
{
label: '距离优先',
value: 2,
},
{
label: '价格优先',
value: 3,
}
],
options2: [{
label: '去冰',
value: 1,
},
{
label: '加冰',
value: 2,
},
],
} }
}, },
methods: { methods: {
@@ -51,7 +35,7 @@
page { page {
background-color: $uni-bg-color-grey; background-color: $uni-bg-color-grey;
} }
.root { .content{
margin: 0 10px; margin: 0 10px;
} }