gcb_zc/pages/bidding/subKeywords.vue

<template>
  <div class="sub_key">
    <tit :tname="name"/>
    <!-- 关键词列表 -->
    <ul class="stage_box">
      <li v-for="(item,index) in stages" :key="index">
        {{ item.text }}
        <img src="../../static/img/icon_delete.png">
      </li>
    </ul>
    <div class="add_box">
      <input type="text" placeholder="输入关键词">
      <button>+&nbsp;添加</button>
    </div>
    <p>提示：最多添加10个关键词？</p>
  </div>
</template>
<script>
import tit from '~/components/titles.vue'
export default {
  data() {
    return {
      name: '自定义关键词',
      stages: [
        { text: '电源' },
        { text: '工程筹备' },
        { text: '主体施工' },
        { text: '设备安装' },
        { text: '电源' },
        { text: '工程筹备' },
        { text: '主体施工' },
        { text: '设备安装' }
      ]
    }
  },
  methods: {
    chooseOne: function(index) {
      this.current = index
    }
  },
  components: {
    tit
  }
}
</script>
  
<style>
.sub_key {
}
.sub_key p{
  color: #ccc;
  font-size: 12px;
  padding-left: 2rem;
  margin-top: 10px;
}
.sub_key .stage_box {
  width: 100%;
  padding: 0 1.5rem;
}
.sub_key .stage_box li {
  background-color: #f2f2fa;
  border-radius: 4px;
  padding: 6px 12px;
  display: inline-block;
  margin-right: 10px;
  text-align: center;
  margin-top: 20px;
}
.sub_key .stage_box li img {
  width: 10px;
  vertical-align: middle;
  margin-left: 6px;
}
.sub_key .stage_box li::after {
  position: absolute;
  content: '';
  display: block;
  height: 1px;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: #f0f0f0;
  margin-right: -1.5rem;
  margin-left: -1.5rem;
}
.sub_key .stage_box li.active {
  background-image: url('../../static/img/icon_selected.png');
  color: #ff5c5c;
}
.add_box {
  width: 100%;
  border-radius: 8px;
  position: relative;
  margin-top: 20px;
  padding: 0 1.5rem;
}
.add_box input {
  height: 40px;
  line-height: 40px;
  border: 1px solid #f0f0f0;
   width: 100%;
   padding-left: 1rem;
   padding-right: 8rem;
   border-radius: 8px;
   outline: none;
}
.add_box button {
  height: 40px;
  line-height: 40px;
  position: absolute;
  top: 0;
  right: 1.5rem;
  background-color: #ff5c5c;
  text-align: center;
  border: none;
  outline: none;
  color: #fff;
  padding: 0 20px;
  border-radius: 8px;
}
</style>