yixing_zc_wx/pages/subPackages/meetingroom/components/position-nav/index.vue

<template>
  <div class="position-nav" :style="'background:' + bg">
    <div class="icon">
      <i class="iconfont icon-dingwei"></i>
    </div>
    <div class="inp">
      <input
        :style="'background:' + bg"
        type="text"
        v-model="address"
        @change="valueChange"
      />
    </div>
    <!--    <div class="right">导航</div>-->
  </div>
</template>

<script>
export default {
  props: {
    address: {
      type: String,
      default: "",
    },
    bg: {
      type: String,
      default: "#f8f8f8",
    },
  },
  data() {
    return {
      show: "",
    };
  },
  mounted() {
    this.show = this.address;
  },
  methods: {
    valueChange() {
      this.$emit("childByValue", this.address);
    },
  },
};
</script>

<style lang="scss" type="text/scss" scoped>
.position-nav {
  display: flex;
  padding: 0 30rpx;
  justify-content: space-between;
  align-items: center;
  border-radius: 70rpx;
  box-shadow: 0px 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.12);
  height: 70px;
  .icon {
    width: 120rpx;
    text-align: center;
    i {
      font-size: 72rpx;
      //   color: $color2;
    }
  }
  .inp {
    width: 470px;
    input {
      width: 100%;
      line-height: 72rpx;
      font-size: 52rpx;
      //   color: $color4;
    }
  }
  .right {
    width: 100px;
    border-left: 1px solid black;
    font-size: 52rpx;
    // color: $text7;
    text-align: center;
  }
}
</style>