1

src/components/RelicItem.vue

@@ -0,0 +1,86 @@
+<template>
+  <div
+    class="relic-item"
+    :class="{needFlip: !isOdd}"
+  >
+    <div class="curvy-wrap">
+      <div
+        class="node-point-top"
+      />
+      <img
+        src="@/assets/images/curvy-line.png"
+        alt=""
+        class="curvy-line"
+      >
+      <div
+        v-if="isLast"
+        class="node-point-bottom"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    isOdd: {
+      type: Boolean,
+      required: true,
+    },
+    isFirst: {
+      type: Boolean,
+      default: false,
+    },
+    isLast: {
+      type: Boolean,
+      default: false,
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.relic-item {
+  width: 100%;
+  height: 17rem;
+  position: relative;
+  .curvy-wrap {
+    position: absolute;
+    height: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    .node-point-top {
+      position: absolute;
+      left: 0;
+      top: 0;
+      transform: translate(-40%, -50%);
+      width: 1.67rem;
+      height: 1.67rem;
+      border-radius: 50%;
+      background-color: #BC945B;
+      background-color: red;
+    }
+    .curvy-line {
+      height: 100%;
+    }
+    .node-point-bottom {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      transform: translate(40%, 50%);
+      width: 1.67rem;
+      height: 1.67rem;
+      border-radius: 50%;
+      background-color: #BC945B;
+    }
+  }
+}
+
+.needFlip {
+  .curvy-wrap {
+    transform: translateX(-50%) rotateY(180deg);
+    .curvy-line {
+    }
+  }
+}
+</style>

src/views/RelicsAppr.vue

@@ -86,11 +86,25 @@
         </div>
       </div>
     </div>
+
+    <div class="relics-list">
+      <RelicItem
+        v-for="index in 10"
+        :key="index"
+        :is-odd="!!(index % 2)"
+        :is-first="index === 1"
+        :is-last="index === 10"
+        class="relic-item"
+      />
+    </div>
   </div>
 </template>
 
 <script>
+import RelicItem from '@/components/RelicItem.vue'
+
 export default {
+  components: { RelicItem },
   data() {
     return {
       currentDim: 3,
@@ -138,6 +152,7 @@ export default {
   background-size: cover;
   padding-left: 1.67rem;
   padding-right: 1.67rem;
+  overflow: auto;
   .top-bar {
     position: fixed;
     top: 3.17rem;
@@ -253,5 +268,11 @@ export default {
     }
 
   }
+  .relics-list {
+    width: 100%;
+    padding: 9rem 0;
+    > .relic-item {
+    }
+  }
 }
 </style>