<template>
  <div class="captiontext" :style="{ background: datas.backColor }">
    <div
    class="commoditysearch"
    style="
      background-color: rgba(249, 249, 249, 1);
      margin: 20px 0px;"
      
    
    >
      <!-- 标题 -->
     


    <h1>大型设备报价单</h1>
    <table>
        <thead>
            <tr>
                <th>设备名称</th>
                <th>设备型号</th>
                <th>数量</th>
                <th>单价</th>
                <th>总价</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>设备A</td>
                <td>型号A</td>
                <td>2</td>
                <td>￥10000</td>
                <td>￥20000</td>
            </tr>
            <tr>
                <td>设备B</td>
                <td>型号B</td>
                <td>1</td>
                <td>￥15000</td>
                <td>￥15000</td>
            </tr>
            <tr>
                <td>设备C</td>
                <td>型号C</td>
                <td>3</td>
                <td>￥12000</td>
                <td>￥36000</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="4">总计</td>
                <td>￥71000</td>
            </tr>
        </tfoot>
    </table>

      <!-- 描述文字 -->
      <p
        :style="{
          'font-size': datas.descriptionSize + 'px',
          'font-weight': datas.descriptionWeight,
          color: datas.descriptionColor,
          'text-align': datas.positions,
        }"
        style="margin-top: 8px"
        v-if="datas.description"
      >
        {{ datas.description }}
      </p>

      <!-- 更多 -->
      <p
        class="more"
        v-show="datas.more.show"
        :class="datas.positions !== 'center' ? 'lef' : ''"
        :style="{
          color: datas.more.type === 0 ? '#38f' : '',
          top: (datas.wordHeight - 6) / 2 + 'px',
        }"
      >
        {{ datas.more.type === 2 ? '' : datas.more.text }}
        <span> {{ datas.more.type === 0 ? '' : '>' }}</span>
      </p>
    </div>

    <!-- 删除组件 -->
    <slot name="deles" />
  </div>
</template>

<script>
export default {
  name: 'captiontext',
  props: {
    datas: Object,
  },
}
</script>

<style scoped lang="lang="scss"">
 table {
            width: 100%;
            border-collapse: collapse;
            background-color: none;
        }
        th, td {
            border: 1px solid black;
            padding: 10px;
            text-align: left;
            background-color: none;
        }
.captiontext {
  border: 2px solid #fff;
  box-sizing: border-box;
  width: 100%;
  padding: 0 14px;
  min-height: 20px;
  position: relative;

  h2,
  p {
    word-wrap: break-word;
    min-height: 10px;
  }

  /* 更多 */
  .more {
    font-size: 10px;
    color: #969799;
    text-align: center;
    &.lef {
      position: absolute;
      right: 15px;
      top: 12px;
    }
  }
}
</style>
