77 lines
1.8 KiB
Vue
77 lines
1.8 KiB
Vue
|
<template>
|
||
|
|
<view class="box">
|
||
|
|
<view class="box-card">
|
||
|
|
<view class="box-card-up">
|
||
|
|
<view style="font-weight: 700">亿元桶</view>
|
||
|
|
<view style="font-size: 0.6rem; color: #ff7d64">距您1682.40km</view>
|
||
|
|
</view>
|
||
|
|
<view class="box-card-center">
|
||
|
|
<view><uni-icons color="#838c9e" type="location" size="20"></uni-icons></view>
|
||
|
|
<view class="">上海市</view>
|
||
|
|
</view>
|
||
|
|
<view style="overflow: hidden">
|
||
|
|
<view class="box-card-buttom">确定选择</view>
|
||
|
|
<view class="box-card-buttomtow">
|
||
|
|
<uni-icons color="#00ba26" type="checkmarkempty" size="26"></uni-icons>
|
||
|
|
<view>当前选择</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup></script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.box {
|
||
|
|
display: flow-root;
|
||
|
|
}
|
||
|
|
.box-card {
|
||
|
|
background-color: #fff;
|
||
|
|
margin: 1rem 0.8rem;
|
||
|
|
border-radius: 0.5rem;
|
||
|
|
.box-card-up {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
padding: 1rem 1rem 0rem;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
.box-card-center {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
padding: 0.8rem 0.9rem 0rem;
|
||
|
|
color: #838c9e;
|
||
|
|
}
|
||
|
|
.box-card-buttom {
|
||
|
|
overflow: hidden;
|
||
|
|
width: 90%;
|
||
|
|
margin: 0 auto;
|
||
|
|
background-color: #00ba26;
|
||
|
|
border: 1px solid #00ba26;
|
||
|
|
border-radius: 1.5rem;
|
||
|
|
color: #fff;
|
||
|
|
height: 2.8rem;
|
||
|
|
margin-top: 1rem;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
.box-card-buttomtow {
|
||
|
|
overflow: hidden;
|
||
|
|
width: 90%;
|
||
|
|
margin: 0 auto;
|
||
|
|
background-color: #fff;
|
||
|
|
border: 1px solid #00ba26;
|
||
|
|
border-radius: 1.5rem;
|
||
|
|
color: #00ba26;
|
||
|
|
height: 2.8rem;
|
||
|
|
margin-top: 1rem;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|