成员拍照排行

src/saas/AppCountryAlbum/PhotoRank.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="photo-rank">
+    <div class="info-rank">
+      <div class="info-item__title">
+        <h2>成员拍照排名</h2>
+      </div>
+      <div class="info-rank__wrapper">
+        <div class="rank-item" v-for="(item, index) in 100" :key="index">
+          <div class="rank-item__left">
+            <image src="./images/rank1.png" v-if="index === 0" />
+            <image src="./images/rank2.png" v-else-if="index === 1" />
+            <image src="./images/rank3.png" v-else-if="index === 2" />
+            <span v-else>{{ index + 1 > 9 ? index + 1 : '0' + (index + 1) }}</span>
+            <h2>贡平娟</h2>
+          </div>
+          <div class="rank-item__right">
+            <span>已上传</span>
+            <i>10</i>
+            <span>张</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'PhotoRank',
+
+    appName: '拍照排名',
+
+    data () {
+      return {
+
+      }
+    },
+
+    mounted () {
+
+    },
+
+    methods: {
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .photo-rank {
+    padding: 32px 0 40px;
+
+    * {
+      box-sizing: border-box;
+      font-style: normal;
+    }
+
+    .info-rank {
+      margin: 0 32px;
+      padding: 0 32px 32px;
+      background: #FFFFFF;
+      box-shadow: 0px 4px 8px 0px rgba(17, 67, 110, 0.02);
+      border-radius: 16px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .info-item__title {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 108px;
+
+        h2 {
+          font-weight: 600;
+          font-size: 32px;
+          color: #333;
+        }
+      }
+
+      .info-rank__wrapper {
+        .rank-item {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          height: 112px;
+          border-bottom: 1px solid #DDDDDD;
+
+          &:last-child {
+            border-bottom: none;
+          }
+
+          & > div {
+            display: flex;
+            align-items: center;
+          }
+
+          .rank-item__right {
+            font-size: 28px;
+            color: #999999;
+
+            i {
+              color: #2E88FF;
+            }
+          }
+
+          .rank-item__left {
+            image {
+              width: 50px;
+              height: 50px;
+              margin-right: 32px;
+            }
+
+            span {
+              width: 60px;
+              margin-right: 22px;
+              padding-left: 6px;
+              color: #CCCCCC;
+              font-size: 32px;
+              font-weight: 600;
+            }
+
+            h2 {
+              color: #333333;
+              font-size: 32px;
+            }
+          }
+        }
+      }
+    }
+  }
+</style>

src/saas/AppCountryAlbum/components/Organize.vue

@@ -47,7 +47,7 @@
       <div class="info-item info-work">
         <div class="info-item__title">
           <h2>考勤统计</h2>
-          <image src="../images/right.png" @click="linkTo('/saas/AppCountryAlbum/Attendance')" />
+          <image src="../images/right.png" @click="linkTo('./Attendance')" />
         </div>
         <div class="info-work__wrapper">
           <div class="top">
@@ -66,7 +66,7 @@
       <div class="info-item info-rank">
         <div class="info-item__title">
           <h2>成员拍照排名</h2>
-          <image src="../images/right.png" />
+          <image src="../images/right.png" @click="linkTo('./PhotoRank')" />
         </div>
         <div class="info-rank__wrapper">
           <div class="rank-item" v-for="(item, index) in 10" :key="index">