Fox-33 1 day ago
parent
commit
510fa1a5b7
1 changed files with 121 additions and 25 deletions
  1. +121
    -25
      pages/index/index.vue

+ 121
- 25
pages/index/index.vue View File

@ -5,72 +5,145 @@
<div class="report" :style="style">
<!-- 01 -->
<view class="export">
<img class="fg" style="display: block;" :src="configList.report_page_01" crossorigin=anonymous />
<img class="img fg" :src="configList.report_page_01" crossorigin=anonymous />
</view>
<!-- 02 -->
<view class="export">
<!-- <img class="fg" style="display: block;" :src="configList.report_page_02" crossorigin=anonymous /> -->
<img class="fg" style="display: block; position: relative;" src="@/static/image/page-02.png" crossorigin=anonymous />
<img style="display: block; position: absolute; top: 122rpx; left: 144rpx; width: 132rpx; height: 165rpx;" src="@/static/image/temp-14.png" crossorigin=anonymous />
<img class="img fg" :src="configList.report_page_02" crossorigin=anonymous />
</view>
<!-- 03 -->
<view class="export">
<img class="fg" style="display: block;" :src="configList.report_page_03" crossorigin=anonymous />
<img class="img" :src="configList.report_page_03" crossorigin=anonymous />
<img class="img fg" style="top: 122rpx; left: 144rpx; width: 132rpx; height: 165rpx;" src="@/static/image/temp-14.png" crossorigin=anonymous />
<div class="text" style="top: 128rpx; left: 330rpx;">姓名</div>
<div class="text" style="top: 128rpx; left: 476rpx;">性别</div>
<div class="text" style="top: 192rpx; left: 330rpx;">年龄</div>
<div class="text" style="top: 192rpx; left: 476rpx;">学段</div>
<div class="text" style="top: 256rpx; left: 330rpx;">学校</div>
<div class="text" style="top: 300rpx; left: 190rpx;">城市</div>
<div class="text" style="top: 344rpx; left: 220rpx;">出勤情况</div>
</view>
<!-- 04 -->
<view class="export">
<!-- <img class="fg" style="display: block;" :src="configList.report_page_04" crossorigin=anonymous /> -->
<img class="fg" style="display: block;" src="@/static/image/page-04.png" crossorigin=anonymous />
<img class="img fg" style="top: 112rpx; left: 193rpx; width: 414rpx; height: 246rpx; border-radius: 12rpx; overflow: hidden;" src="@/static/image/temp-20.png" crossorigin=anonymous />
<img class="img fg" :src="configList.report_page_04" crossorigin=anonymous />
</view>
<!-- 05 -->
<view class="export">
<!-- <img class="fg" style="display: block;" :src="configList.report_page_05" crossorigin=anonymous /> -->
<img class="fg" style="display: block;" src="@/static/image/page-05.png" crossorigin=anonymous />
<img class="img fg" style="top: 344rpx; left: 100rpx; width: 96rpx; height: 96rpx; transform: rotate(14deg);" src="@/static/image/temp-20.png" crossorigin=anonymous />
<img class="img fg" style="top: 278rpx; left: 20rpx; width: 96rpx; height: 96rpx; transform: rotate(-7deg);" src="@/static/image/temp-14.png" crossorigin=anonymous />
<img class="img fg" style="top: 49rpx; left: 92rpx; width: 118rpx; height: 118rpx; transform: rotate(15deg);" src="@/static/image/temp-20.png" crossorigin=anonymous />
<img class="img fg" style="top: 134rpx; left: 138rpx; width: 118rpx; height: 118rpx; transform: rotate(-6deg);" src="@/static/image/temp-14.png" crossorigin=anonymous />
<img class="img fg" style="top: 194rpx; left: 316rpx; width: 134rpx; height: 134rpx; transform: rotate(-14deg);" src="@/static/image/temp-20.png" crossorigin=anonymous />
<img class="img fg" style="top: 280rpx; left: 430rpx; width: 134rpx; height: 134rpx; transform: rotate(14deg);" src="@/static/image/temp-14.png" crossorigin=anonymous />
<img class="img fg" style="top: 40rpx; left: unset; right: -38rpx; width: 213rpx; height: 213rpx; transform: rotate(14deg);" src="@/static/image/temp-20.png" crossorigin=anonymous />
<img class="img fg" :src="configList.report_page_05" crossorigin=anonymous />
</view>
<!-- 06 -->
<view class="export">
<!-- <img class="fg" style="display: block;" :src="configList.report_page_06" crossorigin=anonymous /> -->
<img class="fg" style="display: block;" src="@/static/image/page-06.png" crossorigin=anonymous />
<img class="img fg" style="top: 190rpx; left: 146rpx; width: 126rpx; height: 80rpx; transform: skew(50deg, -34deg);" src="@/static/image/temp-20.png" crossorigin=anonymous />
<img class="img fg" style="top: 176rpx; left: 390rpx; width: 110rpx; height: 96rpx; transform: skew(50deg, 317deg);" src="@/static/image/temp-20.png" crossorigin=anonymous />
<img class="img fg" style="top: 120rpx; left: 276rpx; width: 110rpx; height: 74rpx; transform: skew(50deg, -34deg);" src="@/static/image/temp-14.png" crossorigin=anonymous />
<img class="img fg" style="top: 280rpx; left: 260rpx; width: 148rpx; height: 96rpx; transform: skew(54deg, 324deg);" src="@/static/image/temp-14.png" crossorigin=anonymous />
<img class="img fg" :src="configList.report_page_06" crossorigin=anonymous />
</view>
<!-- 07 -->
<view class="export">
<img class="fg" style="display: block;" :src="configList.report_page_07" crossorigin=anonymous />
<img class="img fg" style="top: 86rpx; left: 168rpx; width: 154rpx; height: 118rpx;" src="@/static/image/temp-20.png" crossorigin=anonymous />
<img class="img fg" style="top: 86rpx; left: 326rpx; width: 154rpx; height: 118rpx;" src="@/static/image/temp-14.png" crossorigin=anonymous />
<img class="img fg" style="top: 86rpx; left: 478rpx; width: 154rpx; height: 118rpx;" src="@/static/image/temp-20.png" crossorigin=anonymous />
<img class="img fg" style="top: 244rpx; left: 138rpx; width: 226rpx; height: 154rpx;" src="@/static/image/temp-20.png" crossorigin=anonymous />
<img class="img fg" style="top: 244rpx; left: 402rpx; width: 226rpx; height: 154rpx;" src="@/static/image/temp-14.png" crossorigin=anonymous />
<img class="img fg" :src="configList.report_page_07" crossorigin=anonymous />
</view>
<!-- 08 -->
<view class="export">
<img class="fg fg-08" style="display: block;" :src="configList.report_page_08" crossorigin=anonymous />
<img class="img fg" style="top: 76rpx; left: 112rpx; width: 110rpx; height: 110rpx;" src="@/static/image/temp-20.png" crossorigin=anonymous />
<img class="img fg" style="top: 194rpx; left: 112rpx; width: 110rpx; height: 110rpx;" src="@/static/image/temp-14.png" crossorigin=anonymous />
<img class="img fg" style="top: 76rpx; left: 242rpx; width: 110rpx; height: 110rpx;" src="@/static/image/temp-14.png" crossorigin=anonymous />
<img class="img fg" style="top: 194rpx; left: 242rpx; width: 110rpx; height: 110rpx;" src="@/static/image/temp-20.png" crossorigin=anonymous />
<img class="img fg" style="top: 312rpx; left: 242rpx; width: 110rpx; height: 110rpx;" src="@/static/image/temp-14.png" crossorigin=anonymous />
<img class="img fg" style="top: 138rpx; left: 372rpx; width: 110rpx; height: 110rpx;" src="@/static/image/temp-14.png" crossorigin=anonymous />
<img class="img fg" style="top: 258rpx; left: 372rpx; width: 110rpx; height: 110rpx;" src="@/static/image/temp-20.png" crossorigin=anonymous />
<img class="img fg" style="top: 194rpx; left: 504rpx; width: 110rpx; height: 110rpx;" src="@/static/image/temp-20.png" crossorigin=anonymous />
<img class="img fg" style="top: 312rpx; left: 504rpx; width: 110rpx; height: 110rpx;" src="@/static/image/temp-14.png" crossorigin=anonymous />
<img class="img fg" :src="configList.report_page_08" crossorigin=anonymous />
</view>
<!-- 09 -->
<view class="export">
<img class="fg" style="display: block;" :src="configList.report_page_09" crossorigin=anonymous />
<img class="img fg" style="top: 0; left: unset; right: 0; width: auto; height: 100%;" src="@/static/image/temp-20.png" crossorigin=anonymous />
<img class="img fg" style="width: 260rpx; height: 180rpx;" src="@/static/image/temp-14.png" crossorigin=anonymous />
<img class="img img-08 fg" :src="configList.report_page_09" crossorigin=anonymous />
</view>
<!-- 10 -->
<view class="export">
<!-- <img class="fg" style="display: block;" :src="configList.report_page_10" crossorigin=anonymous /> -->
<img class="fg" style="display: block;" src="@/static/image/page-10.png" crossorigin=anonymous />
<img class="img fg" style="top: 126rpx; left: 106rpx; width: 158rpx; height: 106rpx;" src="@/static/image/temp-20.png" crossorigin=anonymous />
<img class="img fg" style="top: 132rpx; left: 450rpx; width: 148rpx; height: 100rpx;" src="@/static/image/temp-20.png" crossorigin=anonymous />
<img class="img fg" style="top: 132rpx; left: 604rpx; width: 90rpx; height: 100rpx;" src="@/static/image/temp-14.png" crossorigin=anonymous />
<img class="img fg" style="top: 238rpx; left: 54rpx; width: 210rpx; height: 140rpx;" src="@/static/image/temp-14.png" crossorigin=anonymous />
<img class="img fg" style="top: 242rpx; left: 450rpx; width: 122rpx; height: 80rpx;" src="@/static/image/temp-14.png" crossorigin=anonymous />
<img class="img fg" style="top: 242rpx; left: 576rpx; width: 120rpx; height: 200rpx;" src="@/static/image/temp-20.png" crossorigin=anonymous />
<img class="img fg" style="top: 326rpx; left: 270rpx; width: 156rpx; height: 106rpx;" src="@/static/image/temp-20.png" crossorigin=anonymous />
<img class="img fg" style="top: 68rpx; left: 274rpx; width: 170rpx; height: 256rpx;" src="@/static/image/temp-20.png" crossorigin=anonymous />
<img class="img fg" :src="configList.report_page_10" crossorigin=anonymous />
</view>
<!-- 11 -->
<view class="export">
<img class="fg" style="display: block;" :src="configList.report_page_11" crossorigin=anonymous />
<img class="img fg" style="top: unset; bottom: 268rpx; left: 54rpx; width: 118rpx; height: 80rpx;" src="@/static/image/temp-14.png" crossorigin=anonymous />
<img class="img fg" style="top: unset; bottom: 268rpx; left: 180rpx; width: 78rpx; height: 110rpx;" src="@/static/image/temp-20.png" crossorigin=anonymous />
<img class="img fg" style="top: unset; bottom: 268rpx; left: 262rpx; width: 210rpx; height: 160rpx;" src="@/static/image/temp-14.png" crossorigin=anonymous />
<img class="img fg" style="top: 240rpx; left: 54rpx; width: 170rpx; height: 142rpx;" src="@/static/image/temp-20.png" crossorigin=anonymous />
<img class="img fg" style="top: 240rpx; left: 380rpx; width: 118rpx; height: 80rpx;" src="@/static/image/temp-20.png" crossorigin=anonymous />
<img class="img fg" :src="configList.report_page_11" crossorigin=anonymous />
</view>
<!-- 12 -->
<view class="export">
<img class="fg" style="display: block;" :src="configList.report_page_12" crossorigin=anonymous />
<img class="img fg" style="top: 130rpx; left: 122rpx; width: 80rpx; height: 100rpx;" src="@/static/image/temp-20.png" crossorigin=anonymous />
<img class="img fg" style="top: 130rpx; left: 224rpx; width: 80rpx; height: 100rpx;" src="@/static/image/temp-14.png" crossorigin=anonymous />
<img class="img fg" style="top: 130rpx; left: 328rpx; width: 80rpx; height: 100rpx;" src="@/static/image/temp-20.png" crossorigin=anonymous />
<img class="img fg" style="top: 130rpx; left: 432rpx; width: 80rpx; height: 100rpx;" src="@/static/image/temp-14.png" crossorigin=anonymous />
<img class="img fg" style="top: 130rpx; left: 536rpx; width: 80rpx; height: 100rpx;" src="@/static/image/temp-20.png" crossorigin=anonymous />
<img class="img fg" style="top: 264rpx; left: 122rpx; width: 80rpx; height: 100rpx;" src="@/static/image/temp-14.png" crossorigin=anonymous />
<img class="img fg" style="top: 264rpx; left: 224rpx; width: 80rpx; height: 100rpx;" src="@/static/image/temp-20.png" crossorigin=anonymous />
<img class="img fg" style="top: 264rpx; left: 328rpx; width: 80rpx; height: 100rpx;" src="@/static/image/temp-14.png" crossorigin=anonymous />
<img class="img fg" style="top: 264rpx; left: 432rpx; width: 80rpx; height: 100rpx;" src="@/static/image/temp-20.png" crossorigin=anonymous />
<img class="img fg" style="top: 264rpx; left: 536rpx; width: 80rpx; height: 100rpx;" src="@/static/image/temp-14.png" crossorigin=anonymous />
<img class="img fg" :src="configList.report_page_12" crossorigin=anonymous />
</view>
<!-- 13 -->
<view class="export">
<!-- <img class="fg" style="display: block;" :src="configList.report_page_13" crossorigin=anonymous /> -->
<img class="fg" style="display: block;" src="@/static/image/page-13.png" crossorigin=anonymous />
<img class="img" :src="configList.report_page_13" crossorigin=anonymous />
<div class="text text-12" style="top: 134rpx; left: 160rpx;">技能01</div>
<div class="text text-12" style="top: 134rpx; left: 260rpx;">技能01描述</div>
<div class="text text-12" style="top: 182rpx; left: 160rpx;">技能02</div>
<div class="text text-12" style="top: 182rpx; left: 260rpx;">技能02描述</div>
<div class="text text-12" style="top: 232rpx; left: 160rpx;">技能03</div>
<div class="text text-12" style="top: 232rpx; left: 260rpx;">技能03描述</div>
<div class="text text-12" style="top: 282rpx; left: 160rpx;">技能04</div>
<div class="text text-12" style="top: 282rpx; left: 260rpx;">技能04描述</div>
<div class="text text-12" style="top: 330rpx; left: 160rpx;">技能05</div>
<div class="text text-12" style="top: 330rpx; left: 260rpx;">技能05描述</div>
</view>
<!-- 14 -->
<view class="export">
<img class="fg" style="display: block;" :src="configList.report_page_14" crossorigin=anonymous />
<img class="img fg" :src="configList.report_page_14" crossorigin=anonymous />
<div class="text text-13" style="top: 150rpx; left: 116rpx;">同学寄语同学寄语同学寄语同学寄语同学寄语同学寄语同学寄语同学寄语</div>
<div class="text text-13" style="top: 260rpx; left: 400rpx;">导师寄语导师寄语导师寄语导师寄语导师寄语导师寄语导师寄语导师寄语导师寄语</div>
</view>
<!-- 15 -->
<view class="export">
<img class="img fg" style="top: 46rpx; left: unset; right: 30rpx; width: 506rpx; height: 390rpx;" src="@/static/image/temp-20.png" crossorigin=anonymous />
<img class="img fg" :src="configList.report_page_15" crossorigin=anonymous />
</view>
<!-- 00 -->
<view class="export">
<img class="img fg" :src="configList.report_page_00" crossorigin=anonymous />
</view>
</div>
</div>
<img v-if="current > 0" class="turn left" style="display: block;" src="@/static/image/icon-left.png" @click="prev" />
<img v-if="current < 13" class="turn right" style="display: block;" src="@/static/image/icon-right.png" @click="next" />
<img v-if="current > 0" class="img turn left" src="@/static/image/icon-left.png" @click="prev" />
<img v-if="current < 15" class="img turn right" src="@/static/image/icon-right.png" @click="next" />
<div class="flex bottom">
<button class="btn" @click="createPdf">生成pdf</button>
@ -202,7 +275,7 @@
<style lang="scss" scoped>
$pages: 14;
$pages: 16;
$w: calc(100vw - 24rpx * 2);
$h: calc(#{$w} / 841.89 * 595.28);
@ -211,7 +284,6 @@
min-height: 100vh;
background: #F7F8FA;
position: relative;
// padding-top: 137rpx;
box-sizing: border-box;
font-family: PingFang SC;
font-weight: 400;
@ -240,12 +312,17 @@
display: inline-block;
width: $w;
min-height: $h;
overflow: hidden;
}
.fg {
position: absolute;
top: 0;
left: 0;
}
.img {
display: block;
width: $w;
height: auto;
@ -255,6 +332,25 @@
}
}
.text {
position: absolute;
font-size: 20rpx;
font-weight: 600;
color: #FFFFFF;
&-12 {
font-size: 14rpx;
color: #000000;
}
&-13 {
width: 206rpx;
white-space: pre-wrap;
font-size: 14rpx;
color: #000000;
}
}
// .export__view {
// position: fixed;
// top: 100vh;


Loading…
Cancel
Save