6点06

src/router/index.js

@@ -51,6 +51,11 @@ const routes = [
     name: "userVerified",
     component: () => import("../views/user/Verified.vue"),
   },
+  {
+    path: "/detail",
+    name: "detail",
+    component: () => import("../views/Detail.vue"),
+  },
   {
     path: "/about",
     name: "About",

src/views/Detail.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="detail">
+    <swiper pagination class="mySwiper">
+      <swiper-slide><img src="../assets/detail.jpg" /></swiper-slide>
+      <swiper-slide><img src="../assets/detail.jpg" /></swiper-slide>
+      <swiper-slide><img src="../assets/detail.jpg" /></swiper-slide>
+      <swiper-slide><img src="../assets/detail.jpg" /></swiper-slide>
+      <swiper-slide><img src="../assets/detail.jpg" /></swiper-slide>
+      <swiper-slide><img src="../assets/detail.jpg" /></swiper-slide>
+    </swiper>
+
+    <div class="info">
+      <div class="price-line">
+        <div class="price"><i class="font_family icon-icon_jiage"></i>320</div>
+        <div class="sub">含 <span>5%</span> 版税</div>
+        <div class="text">
+          <span>已售 23</span>
+          <span>剩余 50</span>
+        </div>
+      </div>
+      <div class="title">游戏《百分之一》精美皮肤---恶魔的礼物</div>
+      <div class="info-bottom">
+        <span class="text1"> 编号 338392 </span>
+        <van-button type="primary" plain size="mini">选择其他编号</van-button>
+        <like-button>20</like-button>
+      </div>
+    </div>
+
+    <div class="creator"></div>
+  </div>
+</template>
+
+<script>
+import { Swiper, SwiperSlide } from "swiper/vue";
+
+import "swiper/swiper.min.css";
+import "swiper/swiper-bundle.min.css";
+
+import SwiperCore, { Pagination } from "swiper";
+
+// install Swiper modules
+SwiperCore.use([Pagination]);
+
+export default {
+  components: {
+    Swiper,
+    SwiperSlide,
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.detail {
+}
+.info {
+  height: 164px;
+  background-color: @bg;
+  border-radius: 20px 20px 0 0;
+  transform: translateY(-16px);
+  position: relative;
+  z-index: 2;
+  padding: 16px;
+  box-sizing: border-box;
+
+  .price {
+    font-size: 36px;
+    font-family: OSP;
+    color: #fdfb60;
+    line-height: 36px;
+    transform: translateY(3px);
+
+    .font_family {
+      font-size: 10px;
+      line-height: 24px;
+      vertical-align: middle;
+    }
+  }
+
+  .price-line {
+    display: flex;
+    align-items: flex-end;
+    .sub {
+      flex-grow: 1;
+      margin-left: 5px;
+      font-size: 14px;
+      color: #949699;
+      line-height: 16px;
+      span {
+        color: #fff;
+      }
+    }
+
+    .text {
+      font-size: 14px;
+      color: #939599;
+      line-height: 16px;
+      span {
+        margin-left: 10px;
+      }
+    }
+  }
+
+  .title {
+    font-size: 20px;
+    font-weight: bold;
+    color: #ffffff;
+    line-height: 28px;
+    margin-top: 12px;
+  }
+
+  .info-bottom {
+    display: flex;
+    position: relative;
+    margin-top: 4px;
+    .text1 {
+      font-size: 14px;
+      color: #949699;
+      line-height: 24px;
+    }
+    .van-button {
+      font-size: 13px;
+      color: #fdfb60;
+      line-height: 24px;
+      background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      border-width: 0px;
+      margin-left: 10px;
+    }
+
+    .like {
+      position: absolute;
+      right: 0;
+    }
+  }
+}
+
+.creator{
+    
+}
+
+/deep/ .mySwiper {
+  width: 100vw;
+  height: 100vw;
+  z-index: 1;
+
+  .swiper-pagination {
+    bottom: 22px;
+  }
+
+  .swiper-pagination-bullet {
+    width: 6px;
+    height: 2px;
+    border-radius: 1px;
+    background: #d7d7d7;
+  }
+
+  .swiper-pagination-bullet-active {
+    background: @prim;
+  }
+
+  .swiper-slide img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 4px;
+  }
+}
+</style>