<template>
  <div class="categoryFrom">
    <el-form-item label="商标类型" style="float:left;padding-right:10px;">
      <el-radio-group style="display:inline-block;">
        <el-radio v-model="radio">文字</el-radio>
        <el-radio v-model="radio" label="2">图形</el-radio>
        <el-radio v-model="radio" label="3">文字及图形</el-radio>
      </el-radio-group>
      <div class="categoryFrom-jieshao">如何选择商标类型？</div>
    </el-form-item>
    <div style="clear:both;"></div>
    <el-form-item label="商标名称" style="width:860px;float:left">
      <el-input style="width:330px" placeholder="请输入商标名称"></el-input>
      <span
        style="font-size:14px;font-family:PingFangSC-Regular;font-weight:400;color:rgba(99,101,105,1);margin-left: 10px"
      >及图</span>
    </el-form-item>

    <div style="clear:both;"></div>
    <el-form-item class="generated-icon" style="width:860px;float:left" label="商标图样">
      <div style="float:left;margin-left:10px;">
        <el-button style="border-radius:100px;color: #666666;" size="mini">手动上传</el-button>
        <el-button style="border-radius:100px;color: #666666;" size="mini">自动生成</el-button>
      </div>
      <div style="clear:both;"></div>
      <div style="margin-top:15px;width: 120px;">
        <img width="120px" height="120px" style="border:2px dashed #e9e9e9" />
        <img
          width="120px"
          height="120px"
          style="border:2px dashed #e9e9e9"
          src="../../../assets/imgs/zwtp.png"
        />
      </div>
      <div class="categoryFrom-imgjieshao">
        <div>
          <i class="el-icon-warning" style="margin-right:6px;"></i>上传黑白图样，注册后可以更换商标颜色使用；
        </div>
        <div style="padding-left:17px">上传彩色图样，注册后只能按照该彩色图样使用，并在委托书商标名称后方增加文字“（指定颜色）”；</div>
        <div style="padding-left:17px">上传的彩色图样需与黑白图样的样式一致。</div>
        <div style="padding-left:17px;color:#0F8EE9;cursor: pointer;">查看上传商标图样注意事项</div>
      </div>
      <div class="categoryFrom-namejieshao">
        <i class="el-icon-warning" style="margin-right: 6px;"></i>自动生成的商标图样默认以“宋体字样自左向右排列”递交官方；
      </div>
    </el-form-item>

    <div style="clear:both;"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radio: "1"
    };
  }
};
</script>

<style lang="scss" scoped>
.categoryFrom .el-input__inner {
  height: 34px !important;
  line-height: 34px !important;
}
.categoryFrom {
  margin-bottom: 10px;
  margin-top: 20px;
  box-sizing: border-box;
}

.categoryFrom-jieshao {
  display: inline-block;
  width: 108px;
  height: 17px;
  font-size: 12px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: #bbbbbb;
  line-height: 17px;
  cursor: pointer;
  margin-left: 30px;
}

.categoryFrom-jieshao:hover {
  color: #0989c5;
  text-decoration: underline;
}

.categoryFrom-namejieshao {
  display: inline-block;
  text-align: left;
  width: 390px;
  height: 23px;
  font-size: 12px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(179, 179, 179, 1);
  line-height: 18px;
  float: right;
  transform: translate(-208px, -30px);
}

.categoryFrom-imgjieshao {
  display: inline-block;
  font-size: 12px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(179, 179, 179, 1);
  position: absolute;
  top: 10px;
  right: 0;
  line-height: 24px;
}

.categoryFrom .el-form-item__error {
  left: 45% !important;
}
.categoryFrom .el-form-item__label {
  text-align: left;
}

.categoryFrom .el-radio__label {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #666666;
  letter-spacing: 0;
  text-align: left;
}

.categoryFrom .el-radio__input.is-checked + .el-radio__label {
  color: #666666;
}

.categoryFrom .el-radio__inner {
  border: 2px solid #dde0e6;
}

.categoryFrom .el-radio__input.is-checked .el-radio__inner {
  border: 4px solid rgb(9, 137, 197);
  background: none;
}

.categoryFrom .el-button {
  border-radius: none;
  color: #0f8ee9;
}
</style>