乡村相册

src/saas/AppCountryAlbum/PersonnelSetting.vue

@@ -1,28 +1,153 @@
 <template>
-  <div class="WatermarkSetting"></div>
+  <div class="PersonnelSetting">
+    <div class="title">
+      <h2>拍摄人</h2>
+      <span>*选择拍摄人后，相册只能上传该拍摄人照片</span>
+    </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="form-btn" hover-class="text-hover">保存</div>
+  </div>
 </template>
 
 <script>
   export default {
-    name: 'WatermarkSetting',
+    name: 'PersonnelSetting',
 
-    appName: '水印设置',
+    appName: '拍摄人选择',
 
     data () {
       return {
+        currIndex: 0
       }
     },
 
-    mounted () {
+    onLoad () {
 
     },
 
     methods: {
-
+      linkTo (url) {
+        uni.navigateTo({
+          url
+        })
+      }
     }
   }
 </script>
 
 <style lang="scss" scoped>
+  .PersonnelSetting {
+    padding-bottom: 130px;
 
+    * {
+      box-sizing: border-box;
+    }
+
+    .form-btn {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      z-index: 1;
+      width: 100%;
+      height: 112px;
+      line-height: 112px;
+      text-align: center;
+      color: #fff;
+      font-size: 32px;
+      background: #1365DD;
+
+      &:active {
+        opacity: 0.8;
+      }
+    }
+
+    .tips {
+      line-height: 44px;
+      margin: 32px;
+      font-size: 28px;
+      color: #999999;
+      white-space: pre-line;
+    }
+
+    .title {
+      display: flex;
+      align-items: center;
+      height: 96px;
+      padding: 0 32px;
+
+      h2 {
+        font-weight: normal;
+        color: #666666;
+        font-size: 32px;
+      }
+
+      span {
+        margin-left: 16px;
+        color: #999999;
+        font-size: 30px;
+      }
+    }
+
+    .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>