乡村相册

src/saas/AppCountryAlbum/SourceSetting.vue

@@ -1,5 +1,26 @@
 <template>
-  <div class="AlbumDetail"></div>
+  <div class="SourceSetting">
+    <div class="title">照片来源</div>
+    <div class="cell-group">
+      <div class="cell-item" hover-class="bg-hover" @click="currIndex = 0">
+        <div class="cell-item__left">
+          <h2>不限</h2>
+        </div>
+        <div class="cell-item__check" :class="[currIndex === 0 ? 'active' : '']"></div>
+      </div>
+      <div class="cell-item" hover-class="bg-hover" @click="currIndex = 1">
+        <div class="cell-item__left">
+          <h2>仅限乡村相册拍摄</h2>
+        </div>
+        <div class="cell-item__check" :class="[currIndex === 1 ? 'active' : '']"></div>
+      </div>
+    </div>
+    <div class="tips">
+      选择不限后：
+1. 成员可以同步手机原相机、数码相机等拍摄的照片和视频；
+2. 仅乡村相册裴舍的照片或者视频会计入考勤，保证考勤统计真实性。
+    </div>
+  </div>
 </template>
 
 <script>
@@ -10,19 +31,93 @@
 
     data () {
       return {
+        currIndex: 0
       }
     },
 
-    mounted () {
+    onLoad () {
 
     },
 
     methods: {
-
+      linkTo (url) {
+        uni.navigateTo({
+          url
+        })
+      }
     }
   }
 </script>
 
 <style lang="scss" scoped>
+  .SourceSetting {
+    * {
+      box-sizing: border-box;
+    }
 
+    .tips {
+      line-height: 44px;
+      margin: 32px;
+      font-size: 28px;
+      color: #999999;
+      white-space: pre-line;
+    }
+
+    .title {
+      height: 96px;
+      line-height: 96px;
+      padding: 0 32px;
+      color: #666666;
+      font-size: 32px;
+    }
+
+    .cell-group {
+      .cell-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 108px;
+        margin-bottom: 16px;
+        padding: 0 32px;
+        background: #FFFFFF;
+
+        &:active {
+          background: #eee;
+        }
+
+        image {
+          width: 32px;
+          height: 32px;
+        }
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+
+        h2 {
+          margin-bottom: 12px;
+          color: #333333;
+          font-size: 32px;
+        }
+
+        p {
+          color: #999999;
+          font-size: 28px;
+        }
+
+        .cell-item__check {
+          flex-shrink: 1;
+          width: 32px;
+          height: 32px;
+          border-radius: 50%;
+          border: 4px solid #CCCCCC;
+          transition: all ease 0.3s;
+
+          &.active {
+            border: 10px solid #1365DD;
+          }
+        }
+      }
+    }
+  }
 </style>