...

src/pages/mine/subs/address/components/item.vue

@@ -0,0 +1,92 @@
+<template>
+  <view class='card-view'>
+    <view class='c-flex-row'>
+      <text>默认</text>
+      <text>
+        黄先生
+        <!--        {{ item.name }}-->
+      </text>
+      <text>
+        13xxxxxx8900
+        <!--        {{ item.mobile }}-->
+      </text>
+    </view>
+    <text class='address'>
+      湖南省 长沙市 雨花区 地址地址地址
+            {{ item.address }}
+    </text>
+
+    <view class='btn-view c-flex-row'>
+      <text>编辑</text>
+      <text>删除</text>
+    </view>
+  </view>
+</template>
+
+<script lang='ts' setup>
+
+defineProps({
+  item: <any>[]
+});
+</script>
+
+<style lang='scss' scoped>
+.card-view {
+  margin: 20rpx 30rpx;
+  padding: 38rpx 30rpx 30rpx 34rpx;
+
+  view:nth-of-type(1) {
+    text:nth-of-type(1) {
+      border-radius: 5rpx;
+      border: 1rpx solid #F32B2B;
+      color: #F32B2B;
+      font-size: 24prx;
+      padding: 1rpx 8rpx;
+    }
+
+    text:nth-of-type(2) {
+      font-size: 32rpx;
+      font-weight: bold;
+      margin-left: 10rpx;
+      color: #333333;
+    }
+
+    text:nth-of-type(3) {
+      font-size: 32rpx;
+      font-weight: bold;
+      margin-left: 20rpx;
+      color: #333333;
+    }
+  }
+
+  .address {
+    font-size: 26rpx;
+    font-weight: 400;
+    margin-top: 10rpx;
+    color: #999999;
+  }
+
+  .btn-view {
+    display: flex;
+    align-self: flex-end;
+    align-items: center;
+
+    text:nth-of-type(n+1) {
+      display: flex;
+      width: 84rpx;
+      height: 48rpx;
+      border-radius: 24rpx;
+      border: 1rpx solid #F32B2B;
+      align-items: center;
+      justify-content: center;
+      color: #F32B2B;
+      margin-left: 20rpx;
+    }
+
+    text:nth-of-type(2) {
+      border: 1rpx solid #DDDDDD;
+      color: #666666;
+    }
+  }
+}
+</style>