JDD-WXCP/pages/point/detail.vue

<template>
  <div class="outer">
    <div class="good">
      <img :src="img" alt="" srcset="" />
    </div>
    <div class="title">
      <div class="text">教育读本</div>
      <div class="price">￥<span class="amount">99.00</span></div>
      <div class="sold">已售223</div>
    </div>
    <div class="selected">2</div>
    <div class="text">4</div>
    <div class="buy">5</div>
  </div>
</template>

<script>
import ProductList from "../common/ProductList";
export default {
  head() {
    return {
      title: "商品详情页",
    };
  },
  data() {
    return {
      images: [],
      list: [],
      loading: false, // 加载状态
      finished: false, // 是否完成加载
      refreshing: false, // 是否正在上拉刷新
      img: "/test/pro.png",
    };
  },
  components: {
    ProductList,
  },
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {
    console.log(this);
  },
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {},
};
</script>

<style>
.outer {
  display: flex;
  width: 100vw;
  flex-direction: column;
  box-sizing: border-box;
}
.outer .good {
  box-sizing: border-box;
  width: 100vw;
  height: 100vw;
  padding: 15vw;
  background: #ffffff;
}
.outer .good img {
  width: 100%;
  height: 100%;
}
.outer .title {
  width: 100%;
  height: 26.66vw;
  padding: 4vw;
  position: relative;
  box-sizing: border-box;
}
.outer .title .text {
  height: 0.5rem;
  width: 3.6rem;
  font-size: 0.36rem;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #111111;
  line-height: 0.5rem;
}

.outer .title .price {
  width: 1.34rem;
  height: 0.7rem;
  font-size: 0.28rem;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #fe9700;
  line-height: 0.7rem;
}
.outer .title .price .amount{
  font-size: 0.50rem;
}

</style>