初始化

2024-11-05 17:43:01 +08:00
parent 2a10e37c10
commit 4e1140419a
97 changed files with 8700 additions and 89 deletions
@@ -0,0 +1,162 @@
+<template>
+  <div @click.self="onClickCancel" class='fixed-model'>
+    <div class="model">
+      <header>
+        <h3>员工人脸照片</h3>
+        <div class="upload-box">
+          <div class="span">点击上传</div>
+          <img v-if="faceImg" class="face-img" :src="props.faceImg" alt="">
+
+          <input @change="onChangeFile" type="file" accept="image/*"/>
+        </div>
+      </header>
+      <p class="tips">注：点击照片框进行人脸照片上传</p>
+      <div class="button-box">
+          <div @click="onClickCancel" class="cancel-button">取消</div>
+          <div @click="onClickSave" class="save-button">保存</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useStore } from 'vuex'
+import { rulesForm, resetForm, rulesPhone } from '@/com/index'
+
+/* @data */
+  const router = useRouter()
+  const store = useStore()
+  const emits = defineEmits(['change', 'cancel', 'save'])
+
+  const props = defineProps({
+    faceImg: {
+      default: ''
+    },
+  })
+  const file = ref()
+
+/* @setup */
+ 
+/* @method */
+  // 上传图片
+  const onChangeFile = (e) =>{
+    file.value = e.target.files[0]
+    emits('change', e.target.files[0])
+  }
+  const onClickCancel = () =>{
+    emits('cancel')
+  }
+  const onClickSave = () =>{
+    emits('save', file.value)
+  }
+  
+ 
+</script>
+
+<style lang='scss' scoped>
+.fixed-model{
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(60,60,67,0.6);
+  .model{
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translateX(-50%) translateY(-65%) ;
+    width: 8.1867rem /* 614/75 */;
+    // height: 394px;
+    background: #FFFFFF;
+    border-radius: .5333rem /* 40/75 */;
+    padding:  0 0 .7733rem /* 58/75 */;
+    box-sizing: border-box;
+    header{
+      width: 100%;
+      height: 10.5333rem /* 790/75 */;
+      background: #FFFFFF;
+      border-radius: .5333rem /* 40/75 */;
+      background: url('../assets/img/renlianbeijing.png') left top/100% 100% no-repeat;
+      h3{
+        line-height: .7733rem /* 58/75 */;
+        font-size: .5333rem /* 40/75 */;
+        font-family: Source Han Sans CN, Source Han Sans CN;
+        font-weight: 500;
+        color: #222222;
+        padding: .8533rem /* 64/75 */ 0 0 ;
+        text-align: center;
+        box-sizing: border-box;
+      }
+      .upload-box{
+        position: relative;
+        width: 4.4rem /* 330/75 */;
+        height: 4.4rem /* 330/75 */;
+        background: #FFFFFF;
+        box-shadow: 0px .1067rem /* 8/75 */ .8rem /* 60/75 */ .2667rem /* 20/75 */ rgba(68,140,247,0.4);
+        border-radius: .2667rem /* 20/75 */;
+        margin: 1.28rem /* 96/75 */ auto 0;
+        overflow: hidden;
+        .span{
+          text-align: center;
+          line-height: 4.4rem /* 330/75 */;
+          font-size: $size30;
+          font-family: Source Han Sans CN, Source Han Sans CN;
+          font-weight: 400;
+          color: #999999;
+
+        }
+        // display: flex;
+        .face-img, input{
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 100%;
+          height: 100%;
+          border-radius: .2667rem /* 20/75 */;
+          opacity: 0;
+        }
+        .face-img{
+          opacity: 1;
+        }
+        
+      }
+    }
+    .tips{
+      line-height: .5333rem /* 40/75 */;
+      font-size: $md-size;
+      font-family: Source Han Sans CN, Source Han Sans CN;
+      font-weight: 400;
+      color: #5F6583;
+      text-align: center;
+      margin-top: -1.6rem /* 120/75 */;
+    }
+    .button-box{
+      // margin-top: 1.1467rem /* 86/75 */;
+      display: flex;
+      padding: 0 .7733rem /* 58/75 */;
+      box-sizing: border-box;
+      margin-top: .6133rem /* 46/75 */;
+      div{
+        // width: 240px;
+        flex: 1;
+        height: 1.0667rem /* 80/75 */;
+        line-height: 1.0667rem /* 80/75 */;
+        background: #448CF7;
+        border-radius: 1.3333rem /* 100/75 */;
+        text-align: center;
+        font-size: $md-size;
+        color: #FFFFFF;
+      }
+      .cancel-button{
+        margin-right: .2667rem /* 20/75 */;
+        background: #D9D9D9;
+        color: #999999;
+
+      }
+    }
+  }
+}
+</style>