仿拉勾网第二篇--选择城市站

       第一篇主要分享了项目的准备工作，搭建了一个头部导航基础框架。今天就写第二篇啦！这次要跟家人们分享的是头部导航区域中选择城市站部分。实现的功能是：点击头部导航区域中城市站，会出现选择城市站面板，在这里你可以根据自己的意愿选择相应的城市，点击关闭按钮或者再次点击头部导航区域中城市站即可关闭面板。一起来看看吧！

一、准备工作

1. 准备文件夹

       首先，在components文件夹下创建一个文件夹，命名为city-select, 其下创建index.vue文件，我们的选择城市站页面就在这里写啦~

2. 引入到文件中

       选择城市站面板是在点击头部导航区域中的城市站后才出现的，所以我们需要将面板文件引入到头部导航文件中。

二、代码部分

1. template区域html代码

        从html入手，先搭建一个整体的框架，构建好面板中所需要的元素。这里主要是用一些div来分别包裹小区域，有p标签来写整行文字，hr标签设置面板中需要的分割线，button按钮来做各个城市站框。

<template>
  <div v-if="pannelVisible">
    <div class="bg"></div>
    <div class="content-box">
      <div class="head">
        <span class="title">切换城市</span>
        <i class="layui-icon layui-icon-close" @click.stop="closeBtn"></i>
      </div>
      <div class="footer">
        <p class="strong-title">亲爱的用户您好：</p>
        <br />
        <p class="msg">切换城市分站，让我们为您提供更准确的信息</p>
        <hr class="hr-dotted" />
        <p class="strong-title">当前定位</p>
        <button
          type="button"
          class="layui-btn layui-btn layui-btn-primary"
          style="color: black"
          >
          <i class="layui-icon layui-icon-location"></i>{{ cityChoosed }}
        </button>
        <p class="strong-title">切换城市</p>
        <div class="layui-btn-container">
          <button
            type="button"
            class="layui-btn layui-btn-primary"
            v-for="(i, index) in cityData"
            :key="index"
            @click="cityChoose(i)"
          >
            {{ i }}
          </button>
        </div>
        <hr class="hr-dotted" />
        <p class="msg" style="color: #999">其他城市正在开通中，敬请期待～</p>
      </div>
    </div>
  </div>
</template>

2. script区域代码

<script>
export default {
  data() {
    return {
      cityData: [
        "全国",
        "北京",
        "上海",
        "杭州",
        "广州",
        "长沙",
        "深圳",
        "南京",
        "苏州",
        "石家庄",
        "武汉",
        "更多",
      ],
      pannelVisible: true,
      cityChoosed: "北京",
    };
  },
  methods: {
    closeBtn() {
      this.pannelVisible = !this.pannelVisible;
    },
    cityChoose(city) {
      this.cityChoosed = city;
      // this.pannelVisible = false
    },
  },
};
</script>

3. css代码

<style scoped>
.bg {
  background-color: rgb(10, 10, 10);
  opacity: 0.1;
  position: fixed;
  width: 100%;
  height: 100%;
  cursor: pointer;
  visibility: visible;
}
.content-box {
  position: absolute;
  z-index: 1;
  left: 30%;
  top: 15%;
  width: 650px;
  height: 700px;
  background-color: rgb(252, 247, 247);
}
.head {
  background-color: #00b38a;
  height: 60px;
  line-height: 60px;
}
.title {
  float: left;
  font-size: 26px;
  color: #fff;
  margin-left: 60px;
}
.head .layui-icon-close {
  float: right;
  margin-right: 15px;
  font-size: 30px;
  color: #fff;
  opacity: 0.5;
  cursor: pointer;
}
.footer {
  margin: 40px 60px 0;
}
.hr-dotted {
  text-align: center;
  border-bottom: 1.5px dotted #999 !important;
  margin-top: 30px;
}
.strong-title {
  font-size: 20px;
  font-weight: 600;
}
.strong-title:nth-child(n + 2) {
  margin: 20px 0;
}
.msg {
  font-size: 18px;
}
.layui-btn {
  width: 100px;
  height: 50px;
  font-size: 20px;
  color: #999;
}
.layui-btn-container .layui-btn {
  margin-right: 40px;
}
.layui-btn-container .layui-btn:nth-child(4n) {
  margin-right: 5px;
}
.layui-btn-container .layui-btn:hover {
  width: 105px;
  color: #000;
}
</style>

三、成果展示

       做好了面板还要记得同头部导航区域中选择城市站处建立关系哦，面板最开始是失活状态，给城市站处添加点击事件，通过点击激活面板。关闭面板有两种方式：一种是面板中的关闭按钮，另一种就是第二次点击头部导航区域中的城市站。