1012

src/components/Driver.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="driver"></div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="less" scoped>
+.driver {
+  height: 5px;
+  background-color: @bg2;
+}
+</style>

src/components/LikeButton.vue

@@ -8,7 +8,12 @@
 
 <script>
 export default {
-  props: ["isLike"],
+  props: {
+    isLike: {
+      type: Boolean,
+      default: false,
+    },
+  },
   methods: {
     like() {
       this.$el.children[0].className += "rubberBand";

src/main.js

@@ -11,6 +11,7 @@ import "./styles/font.less";
 import http from "./plugins/http";
 import PageTitle from "./components/PageTitle";
 import LikeButton from "./components/LikeButton.vue";
+import Driver from "./components/Driver.vue";
 
 createApp(App)
   .use(Vant)
@@ -18,6 +19,7 @@ createApp(App)
   .use(ConfigProvider)
   .component("page-title", PageTitle)
   .component("like-button", LikeButton)
+  .component("driver", Driver)
   .use(store)
   .use(router)
   .mount("#app");

src/styles/app.less

@@ -21,8 +21,14 @@
   --van-cell-background-color: transparent;
   --van-cell-group-background-color: transparent;
   --van-font-size-lg: 14px;
+  --van-divider-border-color: #202122;
+  --van-divider-text-color: #202122;
+  --van-divider-margin: 0;
+}
+.van-divider::after,
+.van-divider::before {
+  height: 5px;
 }
-
 body {
   font-size: 14px;
   color: var(--van-text-color);

src/views/Detail.vue

@@ -26,7 +26,63 @@
       </div>
     </div>
 
-    <div class="creator"></div>
+    <driver />
+    <van-cell value="进入主页" is-link class="creator">
+      <template #icon>
+        <van-image
+          width="40"
+          height="40"
+          src="https://bpic.588ku.com/illus_water_img/21/09/08/e769eb69326977dc1a5f488dfb988ba4.jpg"
+          fit="cover"
+          radius="100"
+        />
+      </template>
+      <template #title>
+        <div class="text1">铸造者昵称</div>
+        <div class="text2">铸造者</div>
+      </template>
+    </van-cell>
+
+    <driver />
+
+    <div class="goods">
+      <div class="page-title">商品特性</div>
+      <div class="specific-list">
+        <div class="specific-item">
+          <div class="text1">数字权益卡</div>
+          <div class="text2">打开可见</div>
+        </div>
+        <div class="specific-item">
+          <div class="text1">属性</div>
+          <div class="text2">S级</div>
+        </div>
+        <div class="specific-item">
+          <div class="text1">限量发售</div>
+          <div class="text2">100份</div>
+        </div>
+      </div>
+      <div class="page-title">链上信息</div>
+      <div class="page-text">
+        创世“由艺术大师天野喜孝为游戏”百分之一“倾情绘制，天野喜孝是日本知名画家，插画师，角色设计师，普任”最终幻想“系列多部作品的角色设计
+      </div>
+      <div class="page-title" style="padding-top: 30px">作品描述</div>
+      <div class="page-text">
+        品名：数字权益卡<br />
+        款式：基础版*3+待解锁隐藏款*2<br />
+        尺寸：1080x1920<br />
+        类型：个人创作 <br />
+        创建时间：2021-08-20<br />
+        创世“由艺术大师天野喜孝为游戏”百分之一“倾情绘制，天野喜孝是日本知名画家，插画师，角色设计师，普任”最终幻想“系列多部作品的角色设计
+      </div>
+    </div>
+
+    <driver />
+
+    <van-collapse>
+      <van-collapse-item title="交易记录" name="1">内容1</van-collapse-item>
+    </van-collapse>
+
+    <driver />
   </div>
 </template>
 
@@ -51,6 +107,7 @@ export default {
 
 <style lang="less" scoped>
 .detail {
+  padding-bottom: 100px;
 }
 .info {
   height: 164px;
@@ -135,8 +192,25 @@ export default {
   }
 }
 
-.creator{
-    
+/deep/.creator {
+  align-items: center;
+  padding: 24px 16px 24px;
+  .van-cell__title {
+    margin-left: 12px;
+    .text1 {
+      font-size: 16px;
+      line-height: 24px;
+    }
+    .text2 {
+      font-size: 12px;
+      color: #939599;
+      line-height: 22px;
+    }
+  }
+
+  .van-cell__value {
+    font-size: 13px;
+  }
 }
 
 /deep/ .mySwiper {
@@ -167,4 +241,55 @@ export default {
     border-radius: 4px;
   }
 }
+.goods {
+  padding: 20px 16px;
+}
+
+.page-title {
+  font-size: 18px;
+  font-weight: bold;
+  color: #ffffff;
+  line-height: 28px;
+}
+.specific-list {
+  padding: 16px 0 32px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.specific-item {
+  width: 94px;
+  height: 62px;
+  border-radius: 4px;
+  border: solid 0px transparent;
+  padding: 1px;
+  background-image: linear-gradient(@bg, @bg),
+    linear-gradient(135deg, #fdfb60, #ff8f3e);
+  background-origin: border-box;
+  box-sizing: border-box;
+  background-clip: content-box, border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+
+  .text1 {
+    font-size: 14px;
+    color: #939599;
+    line-height: 24px;
+  }
+
+  .text2 {
+    font-size: 14px;
+    color: #ffffff;
+    line-height: 24px;
+  }
+}
+
+.page-text {
+  font-size: 14px;
+  color: #ffffff;
+  line-height: 28px;
+  margin-top: 10px;
+}
 </style>