gcb_zc/pages/bidding/subStage.vue

<template>
  <div class="sub_stage">
    <tit :tname="name"/>
    <!-- 选择大区 -->
    <ul class="stage_box">
      <li
        v-for="(item,index) in stages"
        :key="index"
      >{{ item.text }}</li>
    </ul>
    <!-- end：选择大区 -->

    <button>确定</button>
  </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_stage{
  
}
.sub_stage .stage_box{
  width: 100%;
  padding: 0 1.5rem;
}
.sub_stage .stage_box li{
  color: #202020;
    line-height: 60px;
    transition: 0.2s;
    position: relative;
    background-image: url('../../static/img/icon_select.png');
    background-position: right center;
    background-size: 20px;
    background-repeat: no-repeat;
}
.sub_stage .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_stage .stage_box li.active{
  background-image: url('../../static/img/icon_selected.png');
  color: #ff5c5c;
}
.sub_stage button{
      width: 100%;
    height: 50px;
    position: absolute;
    bottom: 0;
    left: 0;
    border: none;
    background: #ff5c5c;
    font-size: 18px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    color: white;
}
</style>