|
@@ -0,0 +1,196 @@
|
|
|
+<template>
|
|
|
+ <div class="work-card">
|
|
|
+ <div class="home">
|
|
|
+ <img src="../../../assets/imgs/home_bg.png" class="home-bg" />
|
|
|
+ <div class="logo-info">
|
|
|
+ <img
|
|
|
+ src="../../../assets/imgs/home_logo.png"
|
|
|
+ style="width: 80px; margin-bottom: 16px"
|
|
|
+ />
|
|
|
+ <div class="txt">实施工作证</div>
|
|
|
+ <img
|
|
|
+ :src="data.photoPath"
|
|
|
+ style="width: 220px; margin-top: 16px; margin-bottom: 16px"
|
|
|
+ />
|
|
|
+ <div class="u-name">{{ data.name }}</div>
|
|
|
+ <div class="u-info"> 认证编号:{{ data.code }} </div>
|
|
|
+ <div class="u-info"> 手机号码:{{ data.mobileNumber }} </div>
|
|
|
+ </div>
|
|
|
+ <div class="experience">
|
|
|
+ <div>项目经验:</div>
|
|
|
+ <div v-for="item in projectExperience">{{ item }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="background-box">
|
|
|
+ <div
|
|
|
+ class="background"
|
|
|
+ v-for="item in domList"
|
|
|
+ :style="[item]"
|
|
|
+ :key="item"
|
|
|
+ >{{ content }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="close" @click="emit('close')">×</div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script name="WorkCard" setup>
|
|
|
+import { ref, onMounted, computed } from 'vue';
|
|
|
+import { getWorkCardInfo } from '@/api/sop';
|
|
|
+const projectExperience = computed(() => {
|
|
|
+ return data.value.projectExperience || [];
|
|
|
+});
|
|
|
+const emit = defineEmits(['close']);
|
|
|
+const props = defineProps(['userId']);
|
|
|
+const data = ref({
|
|
|
+ name: '',
|
|
|
+ code: '',
|
|
|
+ mobileNumber: '',
|
|
|
+ photoPath: '',
|
|
|
+ photoPath: '',
|
|
|
+ projectExperience: [],
|
|
|
+});
|
|
|
+const domList = ref([]);
|
|
|
+const h = ref(window.innerHeight * 0.9);
|
|
|
+const w = ref(window.innerHeight * 0.44);
|
|
|
+const initWarter = () => {
|
|
|
+ let screenWidth = w.value;
|
|
|
+ let screenHeight = h.value;
|
|
|
+ let gapX = 0,
|
|
|
+ gapY = 0,
|
|
|
+ width = 0,
|
|
|
+ height = 40,
|
|
|
+ color = '#fff',
|
|
|
+ alpha = 0.4,
|
|
|
+ fontSize = 16,
|
|
|
+ angle = 20,
|
|
|
+ zIndex = 999;
|
|
|
+
|
|
|
+ let heightNum = Math.ceil(screenHeight / (gapY * 2 + height));
|
|
|
+ let widthNum = Math.ceil(
|
|
|
+ screenWidth / (gapX * 2 + (width || screenWidth / 2))
|
|
|
+ );
|
|
|
+
|
|
|
+ let num = heightNum * widthNum;
|
|
|
+
|
|
|
+ for (let i = 0; i < num; i++) {
|
|
|
+ let mask_div = {};
|
|
|
+ mask_div.transform = 'rotate(-' + angle + 'deg)';
|
|
|
+ mask_div.visibility = '';
|
|
|
+ mask_div.overflow = 'hidden';
|
|
|
+ mask_div.margin = `${gapY}px ${gapX}px`;
|
|
|
+ mask_div.zIndex = zIndex;
|
|
|
+ mask_div.pointerEvents = 'none';
|
|
|
+ mask_div.opacity = alpha;
|
|
|
+ mask_div.fontSize = `${fontSize}px`;
|
|
|
+ mask_div.fontFamily = '微软雅黑';
|
|
|
+ mask_div.color = color;
|
|
|
+ mask_div.width = (width || screenWidth / 3) + 'px';
|
|
|
+ mask_div.height = height + 'px';
|
|
|
+
|
|
|
+ domList.value.push(mask_div);
|
|
|
+ }
|
|
|
+};
|
|
|
+const getData = () => {
|
|
|
+ getWorkCardInfo({ userId: props.userId }).then((res) => {
|
|
|
+ data.value = res || {};
|
|
|
+ });
|
|
|
+};
|
|
|
+onMounted(() => {
|
|
|
+ initWarter();
|
|
|
+ getData();
|
|
|
+});
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+.work-card {
|
|
|
+ position: fixed;
|
|
|
+ z-index: 3333;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ background: rgba(0, 0, 0, 0.3);
|
|
|
+ .experience {
|
|
|
+ font-size: 12px;
|
|
|
+ padding: 8px 12px 0 12px;
|
|
|
+ line-height: 18px;
|
|
|
+ color: #262626;
|
|
|
+ }
|
|
|
+ .close {
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+ border-radius: 16px;
|
|
|
+ background: rgba(0, 0, 0, 0.7);
|
|
|
+ text-align: center;
|
|
|
+ line-height: 30px;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #fff;
|
|
|
+ position: absolute;
|
|
|
+ right: 30px;
|
|
|
+ top: 20px;
|
|
|
+ transition: all 0.3s;
|
|
|
+ &:hover {
|
|
|
+ background: rgba(0, 0, 0, 0.9);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .home {
|
|
|
+ height: 90vh;
|
|
|
+ width: 44vh;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateX(-50%) translateY(-50%);
|
|
|
+ .background-box {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ pointer-events: none;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ z-index: -1;
|
|
|
+ .background {
|
|
|
+ box-sizing: border-box;
|
|
|
+ text-align: center;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ pointer-events: none;
|
|
|
+ background-attachment: fixed;
|
|
|
+ background-repeat: repeat;
|
|
|
+ background-origin: content-box;
|
|
|
+ background-position: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .home-bg {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ z-index: -10;
|
|
|
+ }
|
|
|
+ .logo-info {
|
|
|
+ text-align: center;
|
|
|
+ padding-top: 30px;
|
|
|
+ .u-name {
|
|
|
+ font-size: 32px;
|
|
|
+ font-weight: bold;
|
|
|
+ letter-spacing: 3px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+ .u-info {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #8c8c8c;
|
|
|
+ line-height: 30px;
|
|
|
+ }
|
|
|
+ .txt {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #262626;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|