done

src/components/Tab/NavBar/NavItem.vue

+<template>
+  <div
+    :class="['nav_item', { nav_current: index === curIdx }]"
+    @click="changeCityInfo"
+  >
+    {{ item }}
+  </div>
+</template>
+
+<script>
+import { getCurrentInstance, computed } from 'vue'
+export default {
+  name: 'NavItem',
+  props: {
+    item: String,
+    index: Number
+  },
+  setup(props) {
+    const { ctx } = getCurrentInstance(),
+      store = ctx.$store
+
+    const changeCityInfo = () => {
+      store.commit('changeCityInfo', props.index)
+    }
+
+    return {
+      curIdx: computed(() => store.state.curIdx),
+      changeCityInfo
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.nav_item {
+  position: relative;
+  float: left;
+  width: 25%;
+  height: 50px;
+  line-height: 50px;
+  text-align: center;
+  overflow: hidden;
+  &::before {
+    position: absolute;
+    top: -50px;
+    left: 0;
+    content: '';
+    height: 50px;
+    width: 100%;
+    background-color: antiquewhite;
+    z-index: -1;
+    transition: all 0.3s ease-in-out;
+  }
+  &:hover::before {
+    transform: translateY(50px);
+  }
+  &.nav_current {
+    color: white;
+    background-color: black;
+  }
+}
+</style>

src/components/Tab/NavBar/index.vue

+<template>
+  <div class="nav_bar">
+    <nav-item
+      v-for="(item, index) in navData"
+      :key="index"
+      :item="item"
+      :index="index"
+    ></nav-item>
+  </div>
+</template>
+
+<script>
+import NavItem from './NavItem'
+
+export default {
+  name: 'NavBar',
+  components: {
+    NavItem
+  },
+  props: {
+    navData: Array
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.nav_bar {
+  height: 50px;
+  border-bottom: 1px solid #000;
+}
+</style>

src/components/Tab/Page/index.vue

+<template>
+  <div class="page">
+    <h1>{{ cityInfo.name }}</h1>
+    <img :src="cityInfo.img" :alt="cityInfo.name" />
+    <p>{{ cityInfo.desc }}</p>
+  </div>
+</template>
+
+<script>
+import { getCurrentInstance, computed } from 'vue'
+
+export default {
+  name: 'Page',
+  props: {
+    cityData: Array
+  },
+  setup(props) {
+    const { ctx } = getCurrentInstance(),
+      state = ctx.$store.state
+
+    return {
+      cityInfo: computed(() => props.cityData[state.curIdx])
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.page {
+  height: 450px;
+  width: 100%;
+  padding: 20px;
+  box-sizing: border-box;
+  overflow: auto;
+  img {
+    width: 100%;
+  }
+}
+</style>

src/components/Tab/index.vue

+<template>
+  <div class="tab">
+    <nav-bar :navData="navData"></nav-bar>
+    <page :cityData="cityData"></page>
+  </div>
+</template>
+
+<script>
+import NavBar from './NavBar'
+import Page from './Page'
+
+import navData from '@/data/nav'
+import cityData from '@/data/city'
+
+export default {
+  name: 'tab',
+  components: {
+    NavBar,
+    Page
+  },
+  setup() {
+    return {
+      navData,
+      cityData
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tab {
+  width: 500px;
+  height: 500px;
+  margin: 50px auto;
+  border: 1px solid #000;
+}
+</style>

src/data/city.js

+export default [
+  {
+    name: '北京',
+    img:
+      'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596112875246&di=832f32ac0ed8dd4270b0fd3f561ee50e&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fnews%2Fcrawl%2F28%2Fw550h278%2F20181004%2F9c40-hktxqah5984268.jpg',
+    desc:
+      '北京是一座有着三千多年历史的古都，在不同的朝代有着不同的称谓，大致算起来有二十多个别称。'
+  },
+  {
+    name: '上海',
+    img:
+      'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596112917649&di=ab5cd05c2e0ae5ae4e07dcaf8a161385&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_70%2Cc_zoom%2Cw_640%2Fimages%2F20180430%2Fab8f424623704e67ab599e4884f4a021.jpeg',
+    desc:
+      '春秋战国时期，上海是楚国春申君黄歇的封邑，故别称为“申”。晋朝时期，因渔民创造捕鱼工具“扈”，江流入海处称“渎”，因此松江下游一带被称为“扈渎”，以后又改“扈”为“沪”，故上海简称“沪”'
+  },
+  {
+    name: '广州',
+    img:
+      'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596112939903&di=8f6944a8401d876a634e30c8acf1b331&imgtype=0&src=http%3A%2F%2Fwww.71fang.com%2Fconfig%2Fueditor%2Fphp%2Fupload%2F75971521514060.jpg',
+    desc:
+      '传说广州最早的地名为“楚庭”（或“楚亭”）。越秀山上的中山纪念碑下，尚有清人所建一座石牌坊，上面刻着“古之楚亭”四字。不少史籍将“楚庭”视为广州的雏型，是广州最早的称谓，距今已有2847年。'
+  },
+  {
+    name: '济南',
+    img:
+      'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596112984003&di=88fac40f6a12947bc408d8a94272df6d&imgtype=0&src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20170404%2F29bf17999b3c419f8705b88d29182668_th.jpeg',
+    desc:
+      '济南历史悠久，是史前文化“龙山文化”的发祥地，区域内新石器时代的遗址城子崖，有先于秦长城的齐长城，有被誉为“海内第一名塑”的灵岩寺宋代彩塑罗汉、隋代大佛（位于历城区大佛村，凿山而成，建于隋代，为山东第一大佛）。'
+  }
+]

src/data/nav.js

+export default ['北京', '上海', '广州', '济南']

src/store/index.js

 import Vuex from 'vuex'
 
 export default Vuex.createStore({
-  state: {},
-  mutations: {},
+  state: {
+    curIdx: 0
+  },
+  mutations: {
+    changeCityInfo(state, index) {
+      state.curIdx = index
+    }
+  },
   actions: {},
   modules: {}
 })

src/views/Home.vue

 <template>
   <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png" />
+    <Tab></Tab>
   </div>
 </template>
 
 <script>
+import Tab from '@/components/Tab'
+
 export default {
+  components: {
+    Tab
+  },
   name: 'Home'
 }
 </script>