fix(rank-item.vue): dynamic class

src/components/rank-item/rank-item.vue

@@ -3,13 +3,13 @@
  * @Author: Steven
  * @Date: 2020-09-08 15:49:57
  * @LastEditors: Steven
- * @LastEditTime: 2020-09-08 16:28:07
+ * @LastEditTime: 2020-09-10 09:29:01
 -->
 <template>
   <view>
-    <view class="flex my-2 py-2 {{index%2===0?'bg-purple-light':''}}">
+    <view class="flex my-2 py-2" :class="{ 'bg-purple-light': isActive }">
       <view class="flex-1">
-        <view class="{{top3}}">{{ index + 1 }}</view>
+        <view :class="top3">{{ index + 1 }}</view>
       </view>
       <view class="flex-1">{{ item.id }}</view>
       <view class="flex-1">{{ item.name }}</view>
@@ -42,6 +42,9 @@ export default Vue.extend({
       }
       return cls
     },
+    isActive(): boolean {
+      return this.index % 2 === 0
+    },
   },
 })
 </script>

src/components/vote-item/vote-item.vue

@@ -3,44 +3,42 @@
  * @Author: Steven
  * @Date: 2020-09-08 09:24:24
  * @LastEditors: Steven
- * @LastEditTime: 2020-09-08 14:16:43
+ * @LastEditTime: 2020-09-10 09:20:08
 -->
 <template>
-	<view>
-		<view class="code">{{item.id}}</view>
-		<navigator url="#">
-			<image :src="item.img" mode=""></image>
-			<view class="name">{{item.name}}</view>
-			<view class="group">{{item.group}}</view>
-		</navigator>
-		
-		<view class="vote">
-			<view class="vote-num">{{item.vote}}</view>
-			<view class="button">投票</view>
-		</view>
-	</view>
+  <view class="flex flex-col w-1-2 text-center justify-center">
+    <view class="code">{{ item.id }}</view>
+    <navigator url="#">
+      <image :src="item.img" mode=""></image>
+      <view class="name">{{ item.name }}</view>
+      <view class="group">{{ item.group }}</view>
+    </navigator>
+
+    <view class="flex w-4-5">
+      <view
+        class="border border-solid border-gray-500 bg-gray-500 text-white p-2"
+        >{{ item.vote }}</view
+      >
+      <view
+        class="border border-solid border-orange-500 bg-orange-500 text-white p-2"
+        >投票</view
+      >
+    </view>
+  </view>
 </template>
 
 <script lang="ts">
-	import Vue from 'vue';
-	export default Vue.extend({
-		data() {
-			return {
-
-			}
-		},
-		props: {
-			item: Object
-		},
-		onLoad() {
-
-		},
-		methods: {
-
-		},
-	});
+import Vue from "vue"
+export default Vue.extend({
+  data() {
+    return {}
+  },
+  props: {
+    item: Object,
+  },
+  onLoad() {},
+  methods: {},
+})
 </script>
 
-<style>
-
-</style>
+<style></style>