<template>
  <div class="platformTagLib-wrap common-wrap">
    <nav-crumb :navpath="navpath"></nav-crumb>
    <div class="right-content">
      <div class="right-box">
        <div class="platformTagLib-wrap__opt">
          <el-input
            class="w-184"
            placeholder="请输入标签"
            prefix-icon="el-icon-search"
            v-model="platformTagSearch"
            @keyup.enter.native="searchEnterFun">
          </el-input>
          <el-button type="primary" @click="toAddMyTagLib" class="fr">添加至我的标签库</el-button>
        </div>
        <div class="platformTagLib-wrap__libFields">
          <div class="platformTagLib-wrap__lib__cell">
            <div class="platformTagLib-wrap__cell__head" @click="toPlatformTagList">
              <span class="platformTagLib-wrap__cell__name">基本信息</span><span class="platformTagLib-wrap__cell__icon fr"><i class="el-icon-arrow-right"></i></span>
            </div>
            <div class="platformTagLib-wrap__cell__body">
              <div class="platformTagLib-wrap__cell__fieldRow">
                <div class="platformTagLib-wrap__cell__fieldChild inline-block">人口信息<i class="el-icon-arrow-right"></i></div>
                <div class="platformTagLib-wrap__cell__fieldLastChild inline-block">
                  <a :href="'#/platformTagList?test='+test" class="platformTagLib-wrap__cell__fieldName">人口属性</a>
                  <span class="platformTagLib-wrap__cell__fieldName">人生阶段</span>
                  <span class="platformTagLib-wrap__cell__fieldName">人口属性</span>
                  <span class="platformTagLib-wrap__cell__fieldName">人生阶段</span>
                  <span class="platformTagLib-wrap__cell__fieldName">人口属性</span>
                  <span class="platformTagLib-wrap__cell__fieldName">人生阶段</span>
                  <span class="platformTagLib-wrap__cell__fieldName">人口属性</span>
                  <span class="platformTagLib-wrap__cell__fieldName">人生阶段</span>
                  <span class="platformTagLib-wrap__cell__fieldName">人口属性</span>
                  <span class="platformTagLib-wrap__cell__fieldName">人生阶段</span>
                  <span class="platformTagLib-wrap__cell__fieldName">人口属性</span>
                  <span class="platformTagLib-wrap__cell__fieldName">人生阶段</span>
                </div>
              </div>
              <div class="platformTagLib-wrap__cell__fieldRow">
                <div class="platformTagLib-wrap__cell__fieldChild inline-block">人口信息<i class="el-icon-arrow-right"></i></div>
                <div class="platformTagLib-wrap__cell__fieldLastChild inline-block">
                  <span class="platformTagLib-wrap__cell__fieldName">人口属性</span>
                  <span class="platformTagLib-wrap__cell__fieldName">人生阶段</span>
                  <span class="platformTagLib-wrap__cell__fieldName">人口属性</span>
                  <span class="platformTagLib-wrap__cell__fieldName">人生阶段</span>
                  <span class="platformTagLib-wrap__cell__fieldName">人口属性</span>
                  <span class="platformTagLib-wrap__cell__fieldName">人生阶段</span>
                  <span class="platformTagLib-wrap__cell__fieldName">人口属性</span>
                  <span class="platformTagLib-wrap__cell__fieldName">人生阶段</span>
                  <span class="platformTagLib-wrap__cell__fieldName">人口属性</span>
                  <span class="platformTagLib-wrap__cell__fieldName">人生阶段</span>
                  <span class="platformTagLib-wrap__cell__fieldName">人口属性</span>
                  <span class="platformTagLib-wrap__cell__fieldName">人生阶段</span>
                </div>
              </div>
            </div>
            <div class="platformTagLib-wrap__cell__radio">
              <el-radio v-model="radio" label="1" name=""> </el-radio>
            </div>
          </div>
          <div class="platformTagLib-wrap__lib__cell">
            <div class="platformTagLib-wrap__cell__head" @click="toPlatformTagList">
              <span class="platformTagLib-wrap__cell__name">基本信息</span><span class="platformTagLib-wrap__cell__icon fr"><i class="el-icon-arrow-right"></i></span>
            </div>
            <div class="platformTagLib-wrap__cell__body">
              <div class="platformTagLib-wrap__cell__fieldRow">
                <div class="platformTagLib-wrap__cell__fieldChild inline-block">人口信息<i class="el-icon-arrow-right"></i></div>
                <div class="platformTagLib-wrap__cell__fieldLastChild inline-block">
                  <a :href="'#/platformTagList?'" class="platformTagLib-wrap__cell__fieldName">人口属性</a>
                  <a class="platformTagLib-wrap__cell__fieldName">人生阶段</a>
                  <a class="platformTagLib-wrap__cell__fieldName">人口属性</a>
                  <a class="platformTagLib-wrap__cell__fieldName">人生阶段</a>
                  <a class="platformTagLib-wrap__cell__fieldName">人口属性</a>
                  <a class="platformTagLib-wrap__cell__fieldName">人生阶段</a>
                  <a class="platformTagLib-wrap__cell__fieldName">人口属性</a>
                  <a class="platformTagLib-wrap__cell__fieldName">人生阶段</a>
                  <a class="platformTagLib-wrap__cell__fieldName">人口属性</a>
                  <a class="platformTagLib-wrap__cell__fieldName">人生阶段</a>
                  <a class="platformTagLib-wrap__cell__fieldName">人口属性</a>
                  <a class="platformTagLib-wrap__cell__fieldName">人生阶段</a>
                </div>
              </div>
              <div class="platformTagLib-wrap__cell__fieldRow">
                <div class="platformTagLib-wrap__cell__fieldChild inline-block">人口信息<i class="el-icon-arrow-right"></i></div>
                <div class="platformTagLib-wrap__cell__fieldLastChild inline-block">
                  <span class="platformTagLib-wrap__cell__fieldName">人口属性</span>
                  <span class="platformTagLib-wrap__cell__fieldName">人生阶段</span>
                  <span class="platformTagLib-wrap__cell__fieldName">人口属性</span>
                  <span class="platformTagLib-wrap__cell__fieldName">人生阶段</span>
                  <span class="platformTagLib-wrap__cell__fieldName">人口属性</span>
                  <span class="platformTagLib-wrap__cell__fieldName">人生阶段</span>
                  <span class="platformTagLib-wrap__cell__fieldName">人口属性</span>
                  <span class="platformTagLib-wrap__cell__fieldName">人生阶段</span>
                  <span class="platformTagLib-wrap__cell__fieldName">人口属性</span>
                  <span class="platformTagLib-wrap__cell__fieldName">人生阶段</span>
                  <span class="platformTagLib-wrap__cell__fieldName">人口属性</span>
                  <span class="platformTagLib-wrap__cell__fieldName">人生阶段</span>
                </div>
              </div>
            </div>
            <div class="platformTagLib-wrap__cell__radio">
              <el-radio v-model="radio" label="1" name=""> </el-radio>
            </div>
          </div>
          <div class="platformTagLib-wrap__lib__cell">
            <div class="platformTagLib-wrap__cell__head" @click="toPlatformTagList">
              <span class="platformTagLib-wrap__cell__name">基本信息</span><span class="platformTagLib-wrap__cell__icon fr"><i class="el-icon-arrow-right"></i></span>
            </div>
            <div class="platformTagLib-wrap__cell__body">
              <div class="platformTagLib-wrap__cell__fieldRow">
                <div class="platformTagLib-wrap__cell__fieldChild inline-block">人口信息<i class="el-icon-arrow-right"></i></div>
                <div class="platformTagLib-wrap__cell__fieldLastChild inline-block">
                  <a :href="'#/platformTagList?'" class="platformTagLib-wrap__cell__fieldName">人口属性</a>
                  <a class="platformTagLib-wrap__cell__fieldName">人生阶段</a>
                  <a class="platformTagLib-wrap__cell__fieldName">人口属性</a>
                  <a class="platformTagLib-wrap__cell__fieldName">人生阶段</a>
                  <a class="platformTagLib-wrap__cell__fieldName">人口属性</a>
                  <a class="platformTagLib-wrap__cell__fieldName">人生阶段</a>
                  <a class="platformTagLib-wrap__cell__fieldName">人口属性</a>
                  <a class="platformTagLib-wrap__cell__fieldName">人生阶段</a>
                  <a class="platformTagLib-wrap__cell__fieldName">人口属性</a>
                  <a class="platformTagLib-wrap__cell__fieldName">人生阶段</a>
                  <a class="platformTagLib-wrap__cell__fieldName">人口属性</a>
                  <a class="platformTagLib-wrap__cell__fieldName">人生阶段</a>
                </div>
              </div>
              <div class="platformTagLib-wrap__cell__fieldRow">
                <div class="platformTagLib-wrap__cell__fieldChild inline-block">人口信息<i class="el-icon-arrow-right"></i></div>
                <div class="platformTagLib-wrap__cell__fieldLastChild inline-block">
                  <span class="platformTagLib-wrap__cell__fieldName">人口属性</span>
                  <span class="platformTagLib-wrap__cell__fieldName">人生阶段</span>
                  <span class="platformTagLib-wrap__cell__fieldName">人口属性</span>
                  <span class="platformTagLib-wrap__cell__fieldName">人生阶段</span>
                  <span class="platformTagLib-wrap__cell__fieldName">人口属性</span>
                  <span class="platformTagLib-wrap__cell__fieldName">人生阶段</span>
                  <span class="platformTagLib-wrap__cell__fieldName">人口属性</span>
                  <span class="platformTagLib-wrap__cell__fieldName">人生阶段</span>
                  <span class="platformTagLib-wrap__cell__fieldName">人口属性</span>
                  <span class="platformTagLib-wrap__cell__fieldName">人生阶段</span>
                  <span class="platformTagLib-wrap__cell__fieldName">人口属性</span>
                  <span class="platformTagLib-wrap__cell__fieldName">人生阶段</span>
                </div>
              </div>
            </div>
            <div class="platformTagLib-wrap__cell__radio">
              <el-radio v-model="radio" label="1" name=""> </el-radio>
            </div>
          </div>
        </div>
      </div>
    </div>
    <vue-gic-footer></vue-gic-footer>
  </div>
</template>
<script>
  import navCrumb from '@/components/nav/nav.vue';
  import { getRequest, postRequest, postJson, postForm } from '@/api/api';
  export default {
      name: "platformTagLib",
      data() {
        return {
          // 面包屑参数
          navpath: [
            {
              name: '首页',
              path: ''
            },
            {
              name: '会员标签',
              path: ''
            }
          ],
          platformTagSearch: '', // 标签搜索参数
          radio: '1',
          test: 'ffjjfjf'

        }
      },
      methods: {
        /**
         * 添加到我的标签库
         */
        toAddMyTagLib() {
          var that = this

        },

        /**
         * 搜索标签
         */
        searchEnterFun(e) {
          var that = this
          console.log(e)
        },

        /**
         *点击分类到列表
         */
        toPlatformTagList() {

        }

      },
      mounted() {

      },
      components: {
        navCrumb
      }
    }
</script>
<style lang="scss" scoped>
  .platformTagLib-wrap {

    &__opt {

    }

    &__libFields {
      position: relative;
      margin-top: 22px;
      overflow: hidden;
    }

    &__lib__cell {
      position: relative;
      float: left;
      margin-bottom: 30px;
      /*width: 632px;*/
      max-width: calc(100% - 30px);
      border: 1px solid rgba(220,223,230,1);
      border-radius: 3px;
    }

    .platformTagLib-wrap__lib__cell:nth-child(2n+1) {
      margin-right: 30px;

    }

    &__cell {

      &__head {
        width: 100%;
        height: 46px;
        line-height: 46px;
        padding: 0 24px;
        background: #EBEEF5;
        border-radius: 3px 3px 0 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
      }

      &__name {
        font-size: 14px;
        color: #606266;
      }
      &__icon {
        display: inline-block;
        vertical-align: middle;
        font-size: 14px;
        color: #C0C4CC;
      }

      &__body {

        padding: 17px 20px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
      }

      &__fieldRow {
        padding: 13px 0;
        font-size: 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
      }

      &__fieldChild {
        font-size: 14px;
        color: #303133;
        font-weight: 700;
        i {
          font-weight: normal;
          color: #C0C4CC;
        }
      }

      &__fieldLastChild {
        width: calc(100% - 80px);
        max-width: 500px;
        vertical-align: top;
        font-size: 14px;
      }

      &__fieldName {
        position: relative;
        padding: 0px 12px;
        height: 12px;
        line-height: 12px;
        font-size: 14px;
        color: #606266;
      }

      &__radio {
        position: absolute;
        bottom: 3px;
        right: 3px;

        /deep/ .el-radio__label {
          display: none;
        }
      }
    }


  }

</style>
