admin_home/src/views/template/style/sector/menu/1.vue

<template>
  <div class="menuSectorBox">
    <div class="menuBoxBg">
      <div :class="['menuBox',{componentBorder: this.$store.state.template.previewStatus==false}]" ref="menuBox">
        <div>首页</div>
        <div v-for="item in this.$store.state.template.webSiteMenu">{{item.name}}</div>
      </div>
    </div>
    <div :class="['menuSectorInputBox',{componentMenuBorder: this.$store.state.template.previewStatus==false}]">
      <div class="menuSectorInputBoxItem">
        行政职能查询：
        <el-select v-model="departments" filterable placeholder="请选择职能部门">
          <el-option
            v-for="item in this.$store.state.template.departmentList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="menuSectorInputBoxItem">
        行政区划查询：
        <el-select v-model="area.economize" placeholder="请选择省.." @change="changeMarket">
          <el-option
            v-for="item in this.$store.state.template.area.economize"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
        <el-select v-model="area.market" placeholder="请选择市.." @change="changeCounty">
          <el-option
            v-for="item in this.$store.state.template.area.market"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
        <el-select v-model="area.county" placeholder="请选择县..">
          <el-option
            v-for="item in this.$store.state.template.area.county"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </div>
    </div>
  </div>
  
</template>

<script>
export default {
  props: {
    
  },
  data() {
    return {
      area:{//地区
        economize:"",//省区
        market:"",//市区
        county:""//县区
      },
      departments:""
    };
  },
  methods: {
    //选择市
    changeMarket(){
      this.area.market = "";
      this.area.county = "";
      this.$store.dispatch('template/selectWebsiteArea',{province:this.area.economize});
    },
    //选择县
    changeCounty(data){
      this.area.county = "";
      this.$store.dispatch('template/selectWebsiteArea',{province:this.area.economize,city:this.area.market});
    }
  },
  mounted(){},
};
</script>

<style scoped lang="less">
  .menuSectorBox {
    width: 100%;
    background: #F5F7FB;
    .menuBoxBg {
      width: 100%;
      background: #19499F;
      display: flex;
      align-items: center;
      justify-content: center;
      .componentBorder{
        border-left: 2px dashed #999;
        border-right: 2px dashed #999;
      }
      .menuBox {
        width: 80%;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        div {
          width: 12.5%;
          font-size: 14px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          overflow: hidden; 
          white-space: nowrap; 
          text-overflow: ellipsis; 
          text-align: center;
          color: #fff;
        }
      }
    }
    .menuSectorInputBox {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      width: 80%;
      margin: 0 auto;
      border-top: none;
      height: 50px;
      .menuSectorInputBoxItem {
        padding: 0 10px;
        input{
          margin-right: 10px;
        }
        .el-select {
          margin-right: 10px;
        }
      }
    }
    .componentMenuBorder {
      border: 2px dashed #999;
    }
  }
  //执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
  ::v-deep .menuSectorInputBox .menuSectorInputBoxItem .el-input {
    width: 130px !important;
  }
  ::v-deep .el-input--medium .el-input__inner {
    border-radius: 20px;
  }
  //执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
</style>