mall-web-ssr/components/supplier/details.vue

<template>
  <div class="details_info">
    <div class="container">
      <div class="top">
        <div class="img">
          <img src="/images/store/common/default.png">
        </div>
        <div class="right">
          <h4>32222222222222222222</h4>
          <ul class="list-unstyled">
            <li class="item">
              <span>类目(名称)</span>
              <p v-text="spliceString(test, 400)">3errrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr2</p>
            </li>
            <li class="item">
              <span>品牌</span>
              <p>32</p>
            </li>
            <li class="item">
              <span>单位</span>
              <p>32</p>
            </li>
            <li class="item">
              <span>规格</span>
              <p>32</p>
            </li>
            <li class="item">
              <span>种类</span>
              <p>32</p>
            </li>
          </ul>
          <a @click="dialogVisible = true">立即询价</a>
        </div>
      </div>
      <div class="info">
        <table>
          <thead>
          <tr>
            <th colspan="4">
              <p>产品参数 <span>（仅供参考，以实际产品为准）</span></p>
            </th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td width="297">工作温度范围: </td>
            <td width="297"></td>
            <td width="297">最大输入电压：</td>
            <td width="297"></td>
          </tr>
          <tr>
            <td>输出电压-Vout: </td>
            <td></td>
            <td>负载调节：</td>
            <td></td>
          </tr>
          <tr>
            <td>输出类型: </td>
            <td></td>
            <td>安装方式：</td>
            <td></td>
          </tr>
          <tr>
            <td>工作温度范围: </td>
            <td></td>
            <td>最大输入电压：</td>
            <td></td>
          </tr>
          <tr>
            <td>输出电压-Vout: </td>
            <td></td>
            <td>负载调节：</td>
            <td></td>
          </tr>
          <tr>
            <td>输出类型: </td>
            <td></td>
            <td>安装方式：</td>
            <td></td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>

    <el-dialog
      title="我要询价"
      :visible.sync="dialogVisible "
      width="35%"
      :before-close="handleClose">
      <div class="form_dialog">
        <span>这是一段信息</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible  = false">询价提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {cutOutString} from '~utils/baseUtils.js'
  export default {
    name: 'DetailsView',
    data () {
      return {
        dialogVisible: false,
        searchCode: '',
        test: '322222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222'
      }
    },
    methods: {
      spliceString (str, length) {
        return cutOutString(str, length)
      },
      handleClose (done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done()
          })
          .catch(_ => {})
      }
    }
  }
</script>

<style scoped type="text/scss" lang="scss">
.details_info{
  background: #ecf1f1;
  .top{
    margin-bottom:20px;
    .img{
      float:left;
      width:350px;
      height:350px;
      vertical-align: top;
      padding:36px;
      border:1px solid #bababa;
      img{
        width:100%;
        height:100%;
      }
    }
    .right{
      position:relative;
      height:350px;
      margin-left:370px;
      h4{
        width:800px;
        font-size: 25px;
        line-height: 25px;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space:nowrap;
        border-bottom:1px solid #3c7cf5;
        margin:0;
        padding-bottom:20px;
      }
      a{
        display:inline-block;
        position:absolute;
        bottom:0;
        left: 0;
        background: #3c7cf5;
        color:#fff;
        font-size: 14px;
        line-height: 30px;
        height:30px;
        padding:0 10px;
      }
      ul{
        padding-top:35px;
        li{
          margin-bottom:25px;
          span{
            display:inline-block;
            width:70px;
            float:left;
            color:#3c7cf5;
            vertical-align: top;
            text-align: right;
          }
          p{
            width:365px;
            font-size: 14px;
            color:#333;
            margin:0;
            margin-left:90px;
            word-wrap: break-word;
            word-break: normal;
          }
        }
      }
    }
  }
  .info{
    padding-bottom:90px;
    table{
      thead{
        tr{
          line-height: 34px;
          th{
            font-weight: bold;
            color:#fff;
            background: #3c7cf5;
            padding-left:15px;
            p{
              font-size: 16px;
              margin:0;
              span{
                font-size: 12px;
              }
            }
          }
        }
      }
      tbody{
        tr{
          line-height: 34px;
          &:nth-child(odd){
            background: #fff;
          }
          &:nth-child(even){
            background: #f5f6f8;
          }
          td{
            text-align: center;
          }
        }
      }
    }
  }
}
</style>