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

问卷表单

Browse Source
This commit is contained in:
yanran200730
2022-01-28 08:58:23 +08:00
parent c94ff96e22
commit 80d6657a3b
2 changed files with 222 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

210
src/sass/AppAskForm/Statistical.vue Normal file
View File

@@ -0,0 +1,210 @@
<template>
<div class="statistical">
<div class="statistical-tab">
<span :class="[currIndex === 0 ? 'active' : '']" @click="currIndex = 0">问卷统计</span>
<span :class="[currIndex === 1 ? 'active' : '']" @click="currIndex = 1">人员统计</span>
</div>
<div class="statistical-content">
<div class="list-wrapper" v-show="currIndex === 0">
<div class="top">
<span>共</span>
<i>9</i>
<span>题，其中多选</span>
<i>9</i>
<span>题，其中多选</span>
<i>9</i>
<span>道</span>
</div>
<div class="topic-list">
<div class="topic-item" v-for="(item, i) in 10" :key="i">
<h2>一、您是否了解社会治理？(单选）</h2>
<div class="topic-item__wrapper">
<div class="option-item" v-for="(item, index) in 4" :key="index">
<div class="option-item__left">
<h2>A：</h2>
<span>每周监测</span>
</div>
<div class="option-item__right">
<span>10票</span>
<span>40%</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="user-list" v-show="currIndex === 1">
<div class="user-item" v-for="(item, index) in 10" :key="index">
<div class="user-item__left">
<image src="https://p26-passport.byteacctimg.com/img/user-avatar/6401428bcd3b2b9bfed4f31cca07b798~300x300.image" />
<div class="right">
<div class="right-top">
<h2>且听风吟</h2>
<span>微信用户</span>
</div>
<p>2021-10-10 10:30:00</p>
</div>
</div>
<div class="user-item__right">
<p>分值: 10</p>
<div>查看表单</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
appName: '调查结果',
name: 'Statistical',
data () {
return {
currIndex: 0
}
},
onLoad () {
}
}
</script>
<style lang="scss" scoped>
.statistical {
padding-top: 112px;
padding-bottom: 60px;
* {
box-sizing: border-box;
}
i {
font-style: normal;
}
.list-wrapper {
padding-bottom: 40px;
.top {
display: flex;
align-items: center;
height: 116px;
padding: 0 32px;
font-size: 34px;
color: #333;
border-bottom: 4px solid #f3f6f9;
i {
color: #347FFF;
}
}
.topic-item {
padding: 40px 32px 0;
& > h2 {
line-height: 44px;
color: #333333;
font-size: 32px;
}
.option-item {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 24px;
padding: 34px 32px;
border-radius: 16px;
border: 1px solid #CCCCCC;
background: #F5F5F5;
& > div {
display: flex;
}
h2 {
font-weight: 600;
font-size: 32px;
}
.option-item__left {
flex: 1;
margin-right: 18px;
font-weight: 600;
font-size: 32px;
color: #333333;
span {
flex: 1;
text-align: justify;
}
}
.option-item__right {
align-items: center;
span {
color: #666666;
font-size: 28px;
&:first-child {
margin-right: 10px;
}
}
}
}
}
}
.statistical-content {
background: #fff;
}
.statistical-tab {
display: flex;
position: fixed;
align-items: center;
top: 0;
left: 0;
z-index: 11;
width: 100%;
height: 96px;
padding: 0 32px;
background: #fff;
span {
position: relative;
flex: 1;
height: 100%;
line-height: 96px;
text-align: center;
color: #000;
font-size: 32px;
font-weight: 600;
&::after {
position: absolute;
bottom: 0;
left: 50%;
z-index: 1;
width: 192px;
height: 6px;
background: transparent;
transform: translateX(-50%);
content: ' ';
}
&.active {
color: #1365DD;
&::after {
background: #1365DD;
}
}
}
}
}
</style>