移动端收货地址页（一键复制）

最新推荐文章于 2024-07-12 16:27:40 发布

雪天前端

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量183

点赞数 1

分类专栏： uniapp 文章标签：前端 javascript css

本文链接：https://blog.csdn.net/qq_43422957/article/details/140257012

版权

uniapp 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文首发于公众号【雪天前端】，欢迎关注！

空闲时间写个uniapp收货地址静态页面，用到时直接拿来用，需要的道友一键复制即可。

【源码】

<template>
  <view class="address">
    <view class="lists">
      <view class="item" v-for="(item,index) in 5" :key="index">
        <view class="tit">
          <text>赵先生</text>
          <text>139********37</text>
          <text class="tag">家</text>
        </view>
        <view class="detailAddress">
          <text>陕西省 xxx市 xxx区 xxx街道 xxx门</text>
        </view>
        <view class="setbox">
          <view class="default">
            <label>
              <checkbox :value="1" /><text>设为默认</text>
            </label>
          </view>

          <view class="set">
            <view class="setBtn">
              删除
            </view>
            <view class="setBtn">
              复制
            </view>
            <view class="setBtn">
              修改
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="addBtn">
      <button class="btn" type="default">新增地址</button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {

      }
    },
    methods: {

    }
  }
</script>

<style scoped>
  .address {
    padding: 20rpx;
    box-sizing: border-box;
    background-color: #f5f5f5;
    min-height: calc(100vh - 88rpx);
  }

  .addBtn {
    width: 100%;
    height: 200rpx;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10rpx;
    box-sizing: border-box;
  }

  .btn {
    width: 100%;
    background-color: #00aaff;
    color: #fff;
    border-radius: 40rpx;
  }

  .lists {
    margin-bottom: 240rpx;
  }

  .item {
    padding: 30rpx;
    box-sizing: border-box;
    border-radius: 15rpx;
    background-color: #fff;
    margin-bottom: 20rpx;
  }

  .tit {
    font-size: 34rpx;
    font-weight: 700;
    color: #333;
  }

  .detailAddress {
    margin: 15rpx 0 30rpx;
    font-size: 30rpx;
    color: #333;
  }

  .setbox {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .set {
    width: 40%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .setBtn {
    font-size: 24rpx;
    color: #333;
    background-color: #f1f1f1;
    border-radius: 10rpx;
    padding: 5rpx 15rpx;
    box-sizing: border-box;
  }

  /deep/uni-checkbox .uni-checkbox-input {
    width: 18px;
    height: 18px;
  }

  .default text {
    font-size: 26rpx;
  }

  .tag {
    font-size: 20rpx;
    margin-left: 15rpx;
    padding: 0rpx 10rpx;
    box-sizing: border-box;
    border-radius: 4rpx;
    border: 1px solid #00aaff;
    color: #00aaff;
  }
</style>

如有帮助，求个赞