手机端页面
This commit is contained in:
宋伟佳
@@ -0,0 +1,33 @@
|
||||
<!--回答框-->
|
||||
<template>
|
||||
<div id="answer-item">
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="item">
|
||||
<div>回答：
|
||||
<span>{{question.question}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="item">
|
||||
<div>{{question.person}}
|
||||
<span>{{question.modifyTime}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "questionItemInfo"
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#answer-item{
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -1,24 +1,22 @@
|
||||
<!--问题项的描述-->
|
||||
<!--问题的描述-->
|
||||
<template>
|
||||
<div id="questions-item">
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="item">
|
||||
<span>{{question.modifyTime}}</span>
|
||||
</div>
|
||||
<div class="item" style="padding-left: 10px;">
|
||||
<span>{{ resType }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin-top: 10px">
|
||||
<div class="item">
|
||||
<span>{{question.resCode}}</span>
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="item">
|
||||
<div>提问：
|
||||
<span>{{question.question}}</span>
|
||||
</div>
|
||||
<div class="item" style="padding-left: 10px">
|
||||
<span>{{question.content}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="item">
|
||||
<div>{{question.person}}
|
||||
<span>{{question.modifyTime}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -27,15 +25,6 @@ export default {
|
||||
name: "questions-item",
|
||||
props: ['question'],
|
||||
computed: {
|
||||
resType() {
|
||||
const matcher = {
|
||||
INLAND_STAND: '国内标准',
|
||||
FOREIGN_STAND: '国外标准',
|
||||
FOREIGN_LAWS: '国内外政策',
|
||||
BUSINESS: '企业标准'
|
||||
}
|
||||
return matcher[this.question.resType]
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
@@ -45,8 +34,8 @@ export default {
|
||||
question: {
|
||||
immediate: true,
|
||||
deep: true,
|
||||
handler(val) {
|
||||
this.question = val
|
||||
handler(val){
|
||||
console.log(val);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -56,10 +45,10 @@ export default {
|
||||
<style lang="less" scoped>
|
||||
#questions-item{
|
||||
width: 100%;
|
||||
min-width: 130px;
|
||||
padding:10px 0;
|
||||
|
||||
.row {
|
||||
line-height: 1.2;
|
||||
line-height: 1.8;
|
||||
}
|
||||
.item {
|
||||
display: inline-block;
|
||||
|
||||
@@ -0,0 +1,54 @@
|
||||
<!--标准的描述-->
|
||||
<template>
|
||||
<div id="stand-item">
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="item">
|
||||
<span>{{stand.resCode}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="item">
|
||||
<span>{{stand.resName}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "stand-item",
|
||||
props: ['stand'],
|
||||
computed: {
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
stand: {
|
||||
immediate: true,
|
||||
deep: true,
|
||||
handler(val) {
|
||||
console.log(val);
|
||||
this.stand = val
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#stand-item{
|
||||
width: 100%;
|
||||
min-width: 130px;
|
||||
padding:10px 0;
|
||||
.row {
|
||||
line-height: 1.5;
|
||||
}
|
||||
.item {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -23,63 +23,108 @@
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<el-tabs
|
||||
type="border-card"
|
||||
style="height: 100%"
|
||||
class="type-tabs"
|
||||
tab-position="left"
|
||||
>
|
||||
<el-tab-pane label="我的提问">
|
||||
<div style="height: 100%">
|
||||
<el-tabs
|
||||
class="question-tabs"
|
||||
type="border-card"
|
||||
style="height: 100%"
|
||||
tab-position="left">
|
||||
<el-tab-pane label="国内标准">
|
||||
<el-tabs
|
||||
class="question-tabs"
|
||||
type="border-card"
|
||||
style="height: 100%"
|
||||
tab-position="left"
|
||||
>
|
||||
<template v-for="question in questionList">
|
||||
<el-tab-pane class="com-box" :name="question.name">
|
||||
<template slot="label">
|
||||
<questonsItem :question="question"></questonsItem>
|
||||
</template>
|
||||
</el-tab-pane>
|
||||
</template>
|
||||
</el-tabs>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="海外标准">
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="企业标准">
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="公共问题">
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="我的回答">
|
||||
<div>
|
||||
<div class="tab-box">
|
||||
<el-tabs
|
||||
type="border-card"
|
||||
style="height: 100%"
|
||||
class="type-tabs"
|
||||
tab-position="left"
|
||||
>
|
||||
<el-tab-pane label="我的提问">
|
||||
<div style="height: 100%">
|
||||
<el-tabs
|
||||
class="question-tabs"
|
||||
type="border-card"
|
||||
style="height: 100%"
|
||||
tab-position="left">
|
||||
<el-tab-pane label="国内标准">
|
||||
<div v-if="!standList || standList.length === 0">
|
||||
<div style="padding: 20px;">
|
||||
暂无数据
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 100%" v-else>
|
||||
<el-tabs
|
||||
class="question-box"
|
||||
type="border-card"
|
||||
style="height: 100%"
|
||||
tab-position="left"
|
||||
>
|
||||
<template v-for="stand in standList">
|
||||
<el-tab-pane class="com-box" :name="stand.name">
|
||||
<template slot="label">
|
||||
<stand-item :stand="stand"></stand-item>
|
||||
</template>
|
||||
<div v-if="!questionsList || questionsList.length === 0">
|
||||
<div style="padding: 20px;">
|
||||
暂无数据
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 100%" v-else>
|
||||
<el-tabs
|
||||
class="question-box"
|
||||
type="border-card"
|
||||
style="height: 100%"
|
||||
tab-position="left"
|
||||
>
|
||||
<template v-for="question in questionsList">
|
||||
<el-tab-pane class="com-box" :name="question.name">
|
||||
<template slot="label">
|
||||
<questions-item :question="question"></questions-item>
|
||||
</template>
|
||||
<div class="answer-box" >
|
||||
<template v-for="(item, index) in questionInfo.qaMsgEOListReverse">
|
||||
<div class="clearfix">
|
||||
<div class="item" >
|
||||
<question-item-info ></question-item-info>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</template>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</template>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="海外标准">
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="企业标准">
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="公共问题">
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="我的回答">
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="我的订阅">
|
||||
<div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="我的订阅">
|
||||
<div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import questonsItem from './components/questions-item'
|
||||
import questionsItem from './components/questions-item'
|
||||
import questionItemInfo from "@/pages/personal/pages/my-questions/components/questionItemInfo";
|
||||
import standItem from './components/stand-item'
|
||||
export default {
|
||||
name: "index",
|
||||
components:{
|
||||
questonsItem,
|
||||
questionItemInfo,
|
||||
questionsItem,
|
||||
standItem
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
@@ -88,20 +133,27 @@ export default {
|
||||
standName: '',
|
||||
keyCode: '',
|
||||
},
|
||||
questionList: [{
|
||||
title: '问题1',
|
||||
standList: [
|
||||
{
|
||||
name: '1',
|
||||
content: '问题1的内容',
|
||||
resCode:'GB 17354-XXXX',
|
||||
resType: 'FOREIGN_STAND',
|
||||
resName: '机动车安全运行条件',
|
||||
}, {
|
||||
name: '2',
|
||||
resName: '汽车前后端防护装置',
|
||||
resCode:'GB 14444-1',
|
||||
}],
|
||||
questionsList: [
|
||||
{
|
||||
name: '1',
|
||||
question: '标准何时生效？',
|
||||
person: this.$store.getters.userInfo.userName,
|
||||
modifyTime: '2022-03-14 14:40:42',
|
||||
}, {
|
||||
title: '问题2',
|
||||
name: '2',
|
||||
content: '问题2的内容',
|
||||
resCode:'GB 14444-1',
|
||||
resType: 'INLAND_STAND',
|
||||
modifyTime: '2021-08-35 17:45:49',
|
||||
person: this.$store.getters.userInfo.userName,
|
||||
question: '第四条范围何时更改？',
|
||||
modifyTime: '2022-03-14 14:40:42',
|
||||
}],
|
||||
}
|
||||
},
|
||||
@@ -111,8 +163,13 @@ export default {
|
||||
<style lang="less" scoped>
|
||||
#my-questions{
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #F5F7FA;
|
||||
margin-bottom: 10px;
|
||||
.tab-box{
|
||||
height: 100%;
|
||||
}
|
||||
.type-tabs {
|
||||
/deep/.el-tabs__header {
|
||||
margin-right: 0;
|
||||
@@ -123,6 +180,9 @@ export default {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.question-box{
|
||||
|
||||
}
|
||||
.question-tabs {
|
||||
height: 100%;
|
||||
@@ -132,10 +192,10 @@ export default {
|
||||
height: calc(~'100% - 50px');
|
||||
overflow: auto;
|
||||
}
|
||||
/deep/ &.el-tabs--border-card .el-tabs__item {
|
||||
/deep/ &.el-tabs--border-card .el-tabs__item{
|
||||
height: 65px;
|
||||
border-color: #d1dbe5 transparent;
|
||||
text-align: left;
|
||||
text-align: left !important;
|
||||
border-top-color: transparent;
|
||||
&.is-active {
|
||||
border-top-color: #d1dbe5;
|
||||
@@ -155,4 +215,17 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
/deep/.el-tabs--left .el-tabs__item.is-left {
|
||||
text-align: left;
|
||||
height: auto;
|
||||
}
|
||||
.answer-box{
|
||||
height: auto;
|
||||
min-height: 200px;
|
||||
width: 100%;
|
||||
min-width: 300px;
|
||||
background: #F5F7FA;
|
||||
float: right;
|
||||
margin: 20px 10px 0 80px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user