LongjoeUI/src/pages/dhb/dhb_mtrlinfo.vue

<template>
  <div class="setting">
    <!-- 原有页面上半部分 -->
    <div style="text-align: center;">
      <img src="../../assets/dhb_top.jpg" style="display: inline-block;max-width:100%;"> </img>
    </div>

    <!-- 本次新增开发部分 -->
    <div style="margin-bottom:15px">
      <div class="dhb_item_text">
        <div class="dhb_item_name">选择报价或订货历史</div>
        <div class="dhb_item_right">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-iconfontjiantou2"></use>
          </svg>
        </div>
      </div>

<!-- 定制需求申请报价,根据客户属性决定是否显示 -->
       <div class="dhb_item_text" style="margin-top:10px">
        <div class="dhb_item_name">定制需求申请报价</div>
        <div class="dhb_item_right">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-iconfontjiantou2"></use>
          </svg>
        </div>
      </div>     
    </div>

    <!-- 原有页面下半部分 -->
    <div style="text-align: center;">
      <img src="../../assets/dhb_bottom.jpg" style="display: inline-block;max-width:100%;"> </img>
    </div>

  </div>
</template>
<script>
  export default {
    name: 'dhb_mtrlinfo'
  }

</script>
<style>
  body {
    margin: 0;
    padding: 0;
    background-color: #F4F4F4;
    font-family: "微软雅黑";
  }

  .dhb_item_text {
    display: flex;
    flex: 0 0 78%;
    height:36px;
    background-color: #ffffff;
    align-items:center;
    font-weight: 500 
  }

  .dhb_item_name {
    margin: 0 0 0 15px;
  }

  .dhb_item_right {
    color: #9b9b9b;
    font-size: 17px;
    position: absolute;
    right: 16px;
  }

</style>