feat(detail.vue): add style

src/components/detail-video/detail-video.vue

+<!--
+ * @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>

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>

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: {},

src/components/sub-title/sub-title.vue

+<!--
+ * @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

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>

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> = [
   {

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>