160 lines
3.0 KiB
Vue
160 lines
3.0 KiB
Vue
<template>
|
||
<div class="Daily">
|
||
<div class="top">
|
||
<span>请输入汇报单位</span>
|
||
</div>
|
||
<div class="body">
|
||
<h2>今日工作</h2>
|
||
<div class="subtitle">工作拍照汇总</div>
|
||
</div>
|
||
<div class="bottom">
|
||
<div class="bottom-item__wrapper">
|
||
<div class="bottom-item">
|
||
<div class="left">
|
||
<label>汇报人：</label>
|
||
<span>鄢然</span>
|
||
</div>
|
||
<i>2022-04-14</i>
|
||
</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>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'Daily',
|
||
|
||
label: '日报',
|
||
|
||
data () {
|
||
return {
|
||
|
||
}
|
||
},
|
||
|
||
onLoad () {
|
||
|
||
},
|
||
|
||
methods: {
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.Daily {
|
||
padding: 40px 32px 0;
|
||
background: #fff;
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.top {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 8px 0 16px;
|
||
color: #333333;
|
||
font-size: 32px;
|
||
border-bottom: 4px solid #000;
|
||
}
|
||
|
||
.body {
|
||
margin-top: 16px;
|
||
|
||
h2 {
|
||
font-size: 68px;
|
||
color: #333;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.subtitle {
|
||
margin-top: 24px;
|
||
margin-bottom: 24px;
|
||
color: #000;
|
||
font-size: 34px;
|
||
}
|
||
}
|
||
|
||
.bottom {
|
||
margin-top: 24px;
|
||
|
||
.bottom-item__wrapper {
|
||
.bottom-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
line-height: 64px;
|
||
margin-bottom: 16px;
|
||
padding: 0 16px;
|
||
color: #fff;
|
||
font-size: 28px;
|
||
background: #D84A36;
|
||
|
||
i {
|
||
font-style: normal;
|
||
}
|
||
|
||
&:last-child {
|
||
height: auto;
|
||
line-height: 1.3;
|
||
padding: 12px 16px;
|
||
margin-bottom: 0;
|
||
color: #D84A36;
|
||
font-size: 28px;
|
||
text-align: justify;
|
||
border: 3px solid #DB6352;
|
||
background: #fff;
|
||
|
||
span {
|
||
flex: 1;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.add {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
height: 480px;
|
||
margin-top: 32px;
|
||
background: #F7F7F7;
|
||
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>
|