wx/pages/index/components/switchStores.vue

77 lines
1.8 KiB
Vue
Raw Permalink Normal View History

2024-06-15 21:13:11 +08:00
<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>