初版

AdaKing88

2023-08-21 bc03b832caa49bbcd2674fe4cae3701b5059bf95

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<template>
  <div style="pointer-events: none;">
    <div class="aside" style="left: 30px;">
      <div class="asideContent">
        <TouristDistribution />
        <TourismPurpose />
        <TourismIndex />
      </div>
    </div>
    <div class="aside" style="right: 30px;">
      <div class="asideContent">
        <TravelStyle />
        <TransportationStations />
        <VisitingScenicSpots />
      </div>
    </div>
  </div>
</template>
 
<script>
  import TouristDistribution from "./OverviewScenicSpots/TouristDistribution.vue";
  import TourismPurpose from "./OverviewScenicSpots/TourismPurpose.vue";
  import TourismIndex from "./OverviewScenicSpots/TourismIndex.vue";
  import TravelStyle from "./OverviewScenicSpots/TravelStyle.vue";
  import TransportationStations from "./OverviewScenicSpots/TransportationStations.vue";
  import VisitingScenicSpots from "./OverviewScenicSpots/VisitingScenicSpots.vue";
  export default {
    name: "OverviewScenicSpots",
    components: {
      TouristDistribution,
      TourismPurpose,
      TourismIndex,
      TravelStyle,
      TransportationStations,
      VisitingScenicSpots
    },
 
  }
</script>
 
<style scoped lang="less">
  .aside {
    width: 20%;
    height: auto;
    top: 79px;
    bottom: 70px;
    color: aliceblue;
    position: absolute;
 
    .asideContent {
      height: 100%;
      background-color: rgba(24, 47, 78, 0.5);
      border-radius: 10px;
      flex-direction: column;
      align-items: center;
    }
  }
</style>