yos_web/src/SDrpManagement/Products/modules/ProductDetails.vue

<template>
<div class="container normal-panel">
  <div class="product-detail container">
    <el-row :gutter="20">
      <el-col :span="7">
        <img style="width:100%" src="http://oms.idcgroup.com.cn:8082/samex/servlet/attchdown/3459" alt="">
      </el-col>
      <el-col :span="17">
        <div>
          <p class="productName normal-margin">铜本色等径直通</p>
          <p class="normal-margin" style="color:#888;">编码:&emsp;BM8270 0540000</p>
          <p class="normal-margin">价格:<span style="color:red;font-size:1.25rem">&emsp;¥199</span></p>
          <div class="line normal-margin"></div>
          <div>
            <p class="normal-margin">规格:</p>
          </div>
          <div class="flex-align-center" style="margin-bottom:30px">
            <p>数量:&emsp;</p>
            <el-input-number v-model="num" :min="1" :max="10" label="描述文字"></el-input-number>
          </div>
          <p class="normal-margin">型号:&emsp;--</p>
          <p class="normal-margin">材质:&emsp;--</p>
          <el-button class="normal-margin" type="primary" style="width:200px">加入购物车</el-button>
          <div>
            <p>相关链接</p>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</div>
</template>

<script>
export default {
  data () {
    return {
      num:0
    }
  }
}

</script>
<style>
</style>
<style scoped>
.product-detail{
  background: #fff;
  width: 80%;
  margin:30px 0;
  border-radius: 10px;
}
.product-detail p{
  font-size: 14px;
  color:#888 ;
}
.productName{
  font-size: 1.75rem !important;
  color: #333 !important;
}
.line{
  border-bottom: 1px dashed #e3e5ea;
}
.border-left {
  border-left:1px solid #e3e5ea
}
</style>