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.
87 lines
1.7 KiB
87 lines
1.7 KiB
11 months ago
|
<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>
|