You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
86 lines
1.7 KiB
86 lines
1.7 KiB
<template> |
|
<view class="change-position"> |
|
<view class="search"> |
|
<u-search shape="square" :show-action="false" /> |
|
<u-button type="primary">新增</u-button> |
|
</view> |
|
<view class="search-list"> |
|
<view v-for="item in 20" class="item" hover-class="is-active"> |
|
<view class="icon" /> |
|
<text class="position-name">山东路（香港中路-闽江路）</text> |
|
<text class="position">100m内</text> |
|
</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
name: "Change", |
|
} |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
.change-position { |
|
width: 100%; |
|
height : 100%; |
|
background: #ffffff; |
|
|
|
.search { |
|
width : calc(100% - 52rpx); |
|
padding: 26rpx; |
|
display: flex; |
|
align-items: center; |
|
|
|
.u-button { |
|
width: 170rpx; |
|
background: #2663BF; |
|
color: #ffffff; |
|
margin-left: 20rpx; |
|
height: 68rpx; |
|
} |
|
|
|
} |
|
|
|
.search-list { |
|
min-height: 160rpx; |
|
width: 100%; |
|
max-height: 400rpx; |
|
overflow-y: auto; |
|
|
|
.item { |
|
display: flex; |
|
height: 100rpx; |
|
align-items: center; |
|
font-size: 32rpx; |
|
color: #8a8a8a; |
|
padding: 0 26rpx; |
|
|
|
&.is-active { |
|
background: #e7effd; |
|
color: #2663BF; |
|
|
|
.icon { |
|
background-image: url("/static/position_active.png"); |
|
} |
|
} |
|
|
|
.icon { |
|
width: 60rpx; |
|
height: 60rpx; |
|
background-image: url("/static/position.png"); |
|
background-size: 60rpx 60rpx; |
|
background-repeat: no-repeat; |
|
} |
|
|
|
.position-name { |
|
display: block; |
|
flex: 1; |
|
overflow: hidden; |
|
white-space: nowrap; |
|
text-overflow: ellipsis; |
|
} |
|
} |
|
} |
|
} |
|
</style>
|
|
|