<template>
  <div class="key-words">
    <div class="keyword-wrap">
      <p class="title" v-if="text">{{text}}</p>
      <p class="line"></p>
    </div>
    <div class="frame">
        <p class="frame-left"></p>
        <div class="frame-right">
            <p class="line"></p>
            <p class="line"></p>
            <p class="line"></p>
            <div class="advertisement">
                <span class="text">广告</span>
                <p class="logo">
                  <WlPic :src="require('@RecordCard/assets/images/ensure-icon.png')" />
                </p>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
/**
 * 搜索广告和信息流广告都是这种样式（百度、360啥的）
 * 然后如果没有创意的话，只有关键词，就是这种空白的渲染
 */
import WlPic from "weiling-mobile-ui/lib/WlPic";
export default {
  name: "DefaultFrame",
  components: { WlPic },
  props: {
    text: {
      type: String,
      default: "",
    },
  },
};
</script>

<style lang="scss" scoped>
.key-words {
  width: 100%;
  .keyword-wrap {
    @extend %flex-middle;
    > .title {
      color: var(--wl-error-color, #ff395e);
      margin-right: j(10);
      text-decoration: underline;
    }
    > .line {
      flex: 1;
      height: j(16);
      background-color: var(--wl-line-color, #e4e9ed);
      border-radius: j(4);
    }
  }
  .frame {
    display: flex;
    margin-top: j(10);
    &-left {
      width: j(104);
      height: j(68);
      background-color: var(--wl-line-color-light, #EBF0F5);
      border-radius: j(5);
    }
    &-right {
      flex: 1;
      padding-left: j(10);
      .line {
        height: j(12);
        border-radius: j(4);
        margin-bottom:j(6);
        background-color: var(--wl-line-color-light, #EBF0F5);
        &.line-center {
          margin: j(5) 0 j(3) 0;
        }
      }
      > .advertisement {
        font-size: j(10);
        color: #c0c0c0;
        @extend %flex-middle;
        > .text {
          color: var(--wl-primary-color,  #1c9fff);
          padding-right: j(10);
        }
        > .logo {
          margin-top: j(2);
          width: j(28);
        }
      }
    }
  }
}
</style>
