kubbo/dvcp_v2_wxcp_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bug

Browse Source
This commit is contained in:
yanran200730
2022-05-09 16:04:37 +08:00
parent 4a534bd486
commit 850eea52a5
2 changed files with 171 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/saas/AppCountryAlbum/AddReport.vue
View File

@@ -1,11 +1,11 @@
<template>
<div class="report">
<components :is="component"></components>
<components class="report-item" :is="component"></components>
<div class="report-list">
<image @click="component = 'WorkReport'" :class="[component === 'WorkReport' ? 'active' : '']" src="./images/report1.png" />
<image @click="component = 'Daily'" :class="[component === 'Daily' ? 'active' : '']" src="./images/report2.png" />
<image @click="component = 'InspectLog'" :class="[component === 'InspectLog' ? 'active' : '']" src="./images/report3.png" />
<image @click="component = 'MeetingMminutes'" :class="[component === 'MeetingMminutes' ? 'active' : '']" src="./images/report4.png" />
<image @click="component = 'Daily'" :class="[component === 'Daily' ? 'active' : '']" src="./images/report4.png" />
<image @click="component = 'InspectLog'" :class="[component === 'InspectLog' ? 'active' : '']" src="./images/report2.png" />
<image @click="component = 'MeetingMminutes'" :class="[component === 'MeetingMminutes' ? 'active' : '']" src="./images/report3.png" />
</div>
</div>
</template>
@@ -46,10 +46,17 @@
<style lang="scss" scoped>
.report {
height: 100vh;
* {
box-sizing: border-box;
}
.report-item {
min-height: calc(100% - 240px);
overflow-y: auto;
}
.report-list {
display: flex;
justify-content: center;

159
src/saas/AppCountryAlbum/components/WorkReport.vue
View File

@@ -1,6 +1,36 @@
<template>
<div class="WorkReport">
<div class="top">
<span>请输入汇报单位</span>
<span>2022-03-09</span>
</div>
<div class="body">
<h2>工作汇报</h2>
<div class="subtitle">千言街巡查情况汇报</div>
<div class="partition">
<div><i></i></div>
</div>
</div>
<div class="bottom">
<div class="bottom-item__wrapper">
<div class="bottom-item">
<label>汇报人：</label>
<span>鄢然</span>
</div>
<div class="bottom-item">
<label>备注：</label>
<span>鄢然</span>
</div>
</div>
<div class="add">
<div class="add-btn">
<span>添加图片</span>
</div>
<div class="add-btn">
<span>添加文字</span>
</div>
</div>
</div>
</div>
</template>
@@ -8,6 +38,8 @@
export default {
name: 'WorkReport',
label: '工作汇报',
data () {
return {
@@ -25,5 +57,130 @@
</script>
<style lang="scss" scoped>
.WorkReport {
padding: 40px 32px 0;
background: #F6F4F0;
* {
box-sizing: border-box;
}
.top {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
width: 686px;
color: #333333;
font-size: 32px;
border-bottom: 4px solid #E3464B;
}
.body {
margin-top: 8px;
h2 {
font-size: 112px;
color: #E3464B;
font-weight: 600;
text-align: center;
border-top: 2px solid #E3464B;
}
.subtitle {
margin-top: 8px;
margin-bottom: 10px;
height: 60px;
line-height: 60px;
border-radius: 30px;
color: #E3464B;
font-size: 32px;
text-align: center;
border: 3px solid #E3464B;
}
.partition {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
div {
position: relative;
z-index: 1;
padding: 0 6px;
background: #F6F4F0;
i {
display: block;
width: 10px;
height: 10px;
border-radius: 50%;
background: #E3464B;
}
}
&::after {
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 2px;
background: #E3464B;
transform: translateY(-50%);
content: '';
}
}
}
.bottom {
margin-top: 6px;
padding-top: 16px;
border-top: 4px solid #E3464B;
.bottom-item__wrapper {
.bottom-item {
display: flex;
line-height: 44px;
margin-bottom: 16px;
color: #333333;
font-size: 32px;
&:last-child {
margin-bottom: 0;
}
}
}
.add {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
height: 480px;
margin-top: 32px;
background: #FFFFFF;
border-radius: 8px;
.add-btn {
display: flex;
align-items: center;
justify-content: center;
width: 232px;
height: 80px;
color: #FFFFFF;
font-size: 32px;
background: #408EF6;
border-radius: 40px;
&:last-child {
margin-top: 48px;
color: #408EF6;
background: #E7F5FE;
}
}
}
}
}
</style>