diff --git a/src/components/detail-video/detail-video.vue b/src/components/detail-video/detail-video.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b25fcb4029481a204adcd2644483deffb7f8fd4b
--- /dev/null
+++ b/src/components/detail-video/detail-video.vue
@@ -0,0 +1,33 @@
+<!--
+ * @Description: 视频
+ * @Author: Steven
+ * @Date: 2020-09-10 15:15:21
+ * @LastEditors: Steven
+ * @LastEditTime: 2020-09-10 16:26:37
+-->
+<template>
+  <view>
+    <view class="uni-padding-wrap uni-common-mt">
+      <view>
+        <video
+          id="myVideo"
+          src="#"
+          controls
+        ></video>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+import Vue from "vue"
+export default Vue.extend({
+  data() {
+    return {
+      src: "",
+    }
+  },
+})
+</script>
+
+<style></style>
diff --git a/src/components/rank-item/rank-item.vue b/src/components/rank-item/rank-item.vue
index 35e5aa1a8101bff619bfa2d8b03fd10b3e463f72..10e10ef11cec0d2e1194844c296b49217aee3f7d 100644
--- a/src/components/rank-item/rank-item.vue
+++ b/src/components/rank-item/rank-item.vue
@@ -3,7 +3,7 @@
  * @Author: Steven
  * @Date: 2020-09-08 15:49:57
  * @LastEditors: Steven
- * @LastEditTime: 2020-09-10 09:29:01
+ * @LastEditTime: 2020-09-10 16:38:55
 -->
 <template>
   <view>
diff --git a/src/components/stats/stats.vue b/src/components/stats/stats.vue
index 672e554e93d303f48694948b6f431281d596ea9e..dcd70a9dd4645dfa213849c05cd49d264d77a771 100644
--- a/src/components/stats/stats.vue
+++ b/src/components/stats/stats.vue
@@ -3,7 +3,7 @@
  * @Author: Steven
  * @Date: 2020-09-08 09:22:09
  * @LastEditors: Steven
- * @LastEditTime: 2020-09-10 11:29:31
+ * @LastEditTime: 2020-09-10 13:08:22
 -->
 <template>
   <view class="px-4 pt-2">
@@ -13,7 +13,7 @@
       <view class="flex">
         <view class="flex-1" v-for="(item, index) in content" :key="index">
           <view class="text-gray-100 text-center text-xl">
-            {{ item.value }}
+            {{ item.value }} {{isDetail?' 票':''}}
           </view>
           <view class="text-yellow-900 text-center">
             {{ item.name }}
@@ -34,6 +34,7 @@ export default Vue.extend({
   },
   props: {
     content: Array,
+    isDetail: Boolean,
   },
   onLoad() {},
   methods: {},
diff --git a/src/components/sub-title/sub-title.vue b/src/components/sub-title/sub-title.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ab9afec8bc87955a1882b8413360f90220254f0f
--- /dev/null
+++ b/src/components/sub-title/sub-title.vue
@@ -0,0 +1,31 @@
+<!--
+ * @Description: 
+ * @Author: Steven
+ * @Date: 2020-09-10 14:57:59
+ * @LastEditors: Steven
+ * @LastEditTime: 2020-09-10 15:02:14
+-->
+<template>
+  	<view class="text-gray-100 flex w-full text-center justify-center content-center my-2 py-1">
+		<view class="fa fa-chevron-right"></view>
+		<view class="fa fa-chevron-right"></view>
+		<view class="fa fa-chevron-right"></view>
+		<view class="mx-2">{{content}}</view>
+		<view class="fa fa-chevron-left"></view>
+		<view class="fa fa-chevron-left"></view>
+		<view class="fa fa-chevron-left"></view>
+	</view>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({
+    props:{
+        content:String
+    }
+})
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/src/components/vote-list/vote-list.vue b/src/components/vote-list/vote-list.vue
index a316884ae0257bc9e59f91d4fd601afb21561ccd..6fd5e75e45f452dd6724e52a1e3de958c73fcf70 100644
--- a/src/components/vote-list/vote-list.vue
+++ b/src/components/vote-list/vote-list.vue
@@ -3,7 +3,7 @@
  * @Author: Steven
  * @Date: 2020-09-08 09:24:10
  * @LastEditors: Steven
- * @LastEditTime: 2020-09-08 16:26:59
+ * @LastEditTime: 2020-09-10 16:42:04
 -->
 <template>
   <view class="text-gray-100">
@@ -16,7 +16,7 @@
       </view>
     </view>
     <block v-for="(item, index) in items" :key="item.id">
-      <view v-if="isIndex">
+      <view class="" v-if="isIndex">
         <vote-item :item="item"></vote-item>
       </view>
       <view v-else>
diff --git a/src/mock/store.ts b/src/mock/store.ts
index bcd8c1b8cbce4a7c4560cb5a5bcac59540d0324f..a9fe5af19be154093f5d9857dc86e8da27489b1a 100644
--- a/src/mock/store.ts
+++ b/src/mock/store.ts
@@ -3,7 +3,7 @@
  * @Author: Steven
  * @Date: 2020-09-07 17:00:45
  * @LastEditors: Steven
- * @LastEditTime: 2020-09-10 11:00:59
+ * @LastEditTime: 2020-09-10 13:04:26
  */
 export interface Iitem {
   id: Number
@@ -16,8 +16,8 @@ export interface Iitem {
   diffLast: Number
 }
 export interface Iinfo {
-  name: string
-  value: number
+  name: String
+  value: Number
 }
 export const items: Array<Iitem> = [
   {
diff --git a/src/pages/detail/detail.vue b/src/pages/detail/detail.vue
index 7dfb36b4a8bcca96034dd771aedc0d15ce4f8fb8..e78a4695c84fa682b760749eb0ae0c5d90ad3825 100644
--- a/src/pages/detail/detail.vue
+++ b/src/pages/detail/detail.vue
@@ -3,12 +3,29 @@
  * @Author: Steven
  * @Date: 2020-09-08 08:48:06
  * @LastEditors: Steven
- * @LastEditTime: 2020-09-10 10:46:49
+ * @LastEditTime: 2020-09-10 15:58:28
 -->
 <template>
   <view class="bg-purple">
+    <!-- 标题 -->
     <title></title>
-	<stats></stats>
+    <!-- 统计票数 -->
+    <stats :content="getStats" :isDetail="true">
+      <view class="text-2xl text-gray-100 font-bold w-full text-center mt-4"
+        >投票</view
+      >
+    </stats>
+    <!-- 选手详情 -->
+    <sub-title :content="title1"></sub-title>
+    <!-- 选手图片 -->
+    <vote-item :item="item"></vote-item>
+    <!-- 风采展示 -->
+    <sub-title :content="title2"></sub-title>
+    <detail-video></detail-video>
+    <!-- 选手简介 -->
+    <sub-title :content="title3"></sub-title>
+    <!-- 脚注 -->
+    <vote-footer></vote-footer>
   </view>
 </template>
 
@@ -16,13 +33,57 @@
 import Vue from "vue"
 import title from "@/components/title/title.vue"
 import stats from "@/components/stats/stats.vue"
+import voteItem from "@/components/vote-item/vote-item.vue"
+import voteFooter from "@/components/footer/footer.vue"
+import subTitle from "@/components/sub-title/sub-title.vue"
+import detailVideo from "@/components/detail-video/detail-video.vue"
+import { items, Iinfo, Iitem } from "@/mock/store"
 export default Vue.extend({
   data() {
-    return {}
+    return {
+      items,
+      id: 0,
+      item: {},
+      title1: "选手详情",
+      title2: "选手风采",
+      title3: "选手简介",
+    }
+  },
+  onLoad(query) {
+    console.log(query)
+
+    this.id = +query?.id
+    let [item] = this.items.filter((el) => el.id === this.id)
+    this.item = item
   },
   components: {
-	title,
-	stats,
+    title,
+    stats,
+    voteItem,
+    voteFooter,
+    subTitle,
+    detailVideo,
+  },
+  computed: {
+    getStats(): Array<Iinfo> {
+      let [item] = this.items.filter((el) => el.id === this.id)
+      console.log("item: ", item)
+
+      return [
+        {
+          name: "当前票数",
+          value: item?.vote,
+        },
+        {
+          name: "排名",
+          value: item?.rank,
+        },
+        {
+          name: "距上一名",
+          value: item?.diffLast,
+        },
+      ]
+    },
   },
 })
 </script>