shop-pc/components/BsAddress.vue

<template>
  <div>
    <div class="address flex flex-middle" v-if="!isEdit">
      <article class="address__msg">
        <div class="address__msg-line flex flex-middle">
          <img src="@/static/images/goods/point.png" alt="收货地址" />
          <span class="address__msg-line--txt">默认地址</span>
          <UiButton type="yellow_panel">修改</UiButton>
        </div>
        <div class="address__msg-line flex flex-middle">
          <span class="address__msg-line--type">收货地址:</span>
          <span class="address__msg-line--txt"
            >北京市XXXXX区XXXX路xxxxxx小区XXX单元</span
          >
        </div>
        <div class="address__msg-line flex flex-middle">
          <span class="address__msg-line--type">收 货 人 :</span>
          <span class="address__msg-line--txt"
            >北京市XXXXX区XXXX路xxxxxx小区XXX单元</span
          >
        </div>
        <div class="address__msg-line flex flex-middle">
          <span class="address__msg-line--type">手机号码:</span>
          <span class="address__msg-line--txt"
            >北京市XXXXX区XXXX路xxxxxx小区XXX单元</span
          >
        </div>
      </article>
      <div class="hr"></div>
      <div class="address__operation flex flex-column flex-middle">
        <UiButton type="grey" class="flex flex-middle"
          ><img
            class="icon"
            src="@/static/images/goods/switch.png"
            alt="切换地址"
          />
          切换地址</UiButton
        >
        <UiButton type="grey" class="flex flex-middle"
          ><img
            class="icon"
            src="@/static/images/goods/add.png"
            alt="切换地址"
          />
          新建地址</UiButton
        >
      </div>
    </div>
    <div class="address flex flex-middle" v-else>
      <article class="address__msg"></article>
      <div class="hr"></div>
      <div class="address__operation"></div>
    </div>
  </div>
</template>
<script>
import UiButton from "@/components/UiButton.vue";
export default {
  components: { UiButton },
  data() {
    return {
      isEdit: false,
    };
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.address {
  @include layout-box;
  min-height: 189px;
  border: 1px solid #dddddd;
  padding: 28px 34px 8px;
  &__msg {
    width: 776px;
    &-line {
      margin-bottom: 20px;
      img {
        width: 20px;
        height: 24px;
        margin-right: 14px;
      }
      &--type {
        width: 70px;
        font-size: 14px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #999999;
      }
      &--txt {
        font-size: 14px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #333333;
      }
      /deep/.ui-button__yellow_panel {
        width: 62px;
        height: 30px;
        color: #ff875b;
        background: rgba(255, 135, 91, 0.1);
        border-radius: 4px 4px 4px 4px;
        margin-left: 54px;
      }
    }
  }
  .hr {
    width: 2px;
    height: 107px;
    background: #eeeeee;
  }
  &__operation {
    flex: 1;
    /deep/.ui-button__grey {
      width: 114px;
      font-size: 14px;
      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
      font-weight: 400;
      color: #666666;
      &:nth-child(1) {
        margin-bottom: 30px;
      }
    }
    .icon {
      width: 18px;
      height: 18px;
      margin-right: 10px;
    }
  }
}
</style>