85 lines
1.9 KiB
Vue
85 lines
1.9 KiB
Vue
<template>
|
||
<view class="c-card">
|
||
<view class="search">
|
||
<u-search
|
||
placeholder="请输入供应商名称"
|
||
v-model="keyword"
|
||
:showAction="false"
|
||
:bgColor="'#fff'"
|
||
:borderColor="'rgba(0, 0, 0, 0.1)'"
|
||
:placeholderColor="'#C1C1C1'"
|
||
></u-search>
|
||
<view class="btn"> 新增 </view>
|
||
</view>
|
||
<view class="box">
|
||
<view>
|
||
<view>
|
||
<view>供应商名称</view>
|
||
<view>卡号：235466566</view>
|
||
</view>
|
||
<view class="btn"> 删除 </view>
|
||
</view>
|
||
<view>
|
||
<view> 送货员：111 </view>
|
||
<view class="btn_text"> 详情 </view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script setup lang="ts">
|
||
const keyword = ref("");
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.c-card {
|
||
margin: 30rpx 25rpx;
|
||
.search {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.btn {
|
||
background: #00dcee;
|
||
border-radius: 24rpx;
|
||
border: 1px solid #00dcee;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #ffffff;
|
||
margin-left: 50rpx;
|
||
padding: 6rpx 30rpx;
|
||
}
|
||
}
|
||
.box {
|
||
background: #ffffff;
|
||
box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
|
||
border-radius: 13rpx;
|
||
padding: 10rpx 25rpx;
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: #000000;
|
||
line-height: 41rpx;
|
||
margin-top: 30rpx;
|
||
> view {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 20rpx 0rpx;
|
||
.btn {
|
||
background: #ff9d55;
|
||
border-radius: 24rpx;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #ffffff;
|
||
padding: 6rpx 30rpx;
|
||
}
|
||
.btn_text {
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #00dcee;
|
||
}
|
||
}
|
||
> view + view {
|
||
border-top: 1px solid rgba(233, 233, 233, 0.76);
|
||
}
|
||
}
|
||
}
|
||
</style>
|