添加手机端

This commit is contained in:
范强强
2023-06-01 15:55:38 +08:00
parent 9501869b7c
commit 91268248cd
4 changed files with 683 additions and 12 deletions
+6
View File
@@ -522,6 +522,12 @@ export const constantRouterMap = [
name: 'phoneProcessManagement',
component: () => import('@/views/phoneView/processManagement')
},
//知识分享
{
path: '/phoneProblemKnowledgeBase',
name: 'phoneProblemKnowledgeBase',
component: () => import('@/views/phoneView/problemKnowledgeBase')
},
/* 手机端结束 */
// {
// path:'/vehicleinformation',
@@ -0,0 +1,403 @@
<template>
<div class="box">
<div class="header-search">
<van-icon @click="iconClick" class="icon" name="arrow-left"/>
<span class="header-search-text">
线控底盘技术发展与标准化需求研究报告
</span>
</div>
<div class="header-buttom">
<div class="header-buttom-text">
Chassis
</div>
<div class="header-buttom-text">
Chassis
</div>
<div class="header-buttom-text">
Chassis
</div>
</div>
<div class="problemName">
<div class="problemNameLeft">
<img src="~@/assets/icon_contact.png" class="problemNameLeftImg" alt="">
<span class="problemNameLeftText">linda.zhao</span>
</div>
<div class="problemNameLeft">
<img src="~@/assets/icon_time.png" class="problemNameLeftImg" alt="">
<span class="problemNameLeftText">2023-03-29 17:25:05</span>
</div>
</div>
<div class="content">
2021年10月,中国汽车技术研究中心有限公司中国汽车标准化研究院联合行业各方力量,
成立了包括各主机厂、零部件制造商、检测机构、高校等单位在内的“线控底盘技术发展与标准化需求”研究组。
从线控转向、线控制动、线控悬架和线控驱动4 个领域,
围绕技术发展历程、技术路线与技术方案、技术需求、应用现状、测试验证、国内外标准分析和标准化需求等方面开展研究撰写并完成了研究报告,
为后续线控底盘相关技术研发、标准制定和行业管理提供支撑和借鉴。NIO作为“线控转向”领域的牵头单位,参与并完成对应内容。
</div>
<div class="contentFile">
<div class="contentFile-text">
线控底盘技术发展与标准化需求研究报告.pdf
</div>
<div class="contentFile-text">
线控底盘技术发展与标准化需求研究报告.pdf
</div>
<div class="contentFile-text">
线控底盘技术发展与标准化需求研究报告.pdf
</div>
</div>
<div class="iconText">
<div class="iconTextLeft">
<img src="~@/assets/icon_kan.png" alt="">
<span class="iconTextLeft-text">
123
</span>
</div>
<div class="iconTextLeft">
<img src="~@/assets/icon_zan.png" alt="">
<span class="iconTextLeft-text">
123
</span>
</div>
<div class="iconTextLeft">
<img src="~@/assets/icon_shoucang.png" alt="">
<span class="iconTextLeft-text">
123
</span>
</div>
</div>
<div class="comment">
<div class="comment-text">
说点什么评论一下吧~
</div>
<div class="comment-content">
<div class="comment-content-text">
<div class="comment-content-text-left">
<span class="comment-content-text-yuan"></span>
linda.zhao
</div>
<div class="comment-content-text-right">
<span>2023-05-18 10:51:28</span>
</div>
</div>
<div class="comment-text-box">
这里是评论内容这里是评论内容这里是评论内容这里是评论内容这里是评论内容
</div>
<div class="comment-text-button">
<div class="commentRight">
<img src="~@/assets/icon_reply.png" alt="">
<span>回复</span>
</div>
<div class="commentRight">
<img src="~@/assets/icon_rubbish.png" alt="">
<span>删除</span>
</div>
</div>
<div class="reply-box">
<div class="comment-content-text">
<div class="comment-content-text-left">
<span class="comment-content-text-yuan"></span>
linda.zhao
</div>
<div class="comment-content-text-right">
<span>2023-05-18 10:51:28</span>
</div>
</div>
<div class="comment-text-box">
这里是评论内容这里是评论内容这里是评论内容这里是评论内容这里是评论内容
</div>
<div class="comment-text-button">
<div class="commentRight">
<img src="~@/assets/icon_reply.png" alt="">
</div>
<div class="commentRight">
<img src="~@/assets/icon_rubbish.png" alt="">
</div>
</div>
</div>
</div>
<div class="comment-content">
<div class="comment-content-text">
<div class="comment-content-text-left">
<span class="comment-content-text-yuan"></span>
linda.zhao
</div>
<div class="comment-content-text-right">
<span>2023-05-18 10:51:28</span>
</div>
</div>
<div class="comment-text-box">
这里是评论内容这里是评论内容这里是评论内容这里是评论内容这里是评论内容
</div>
<div class="comment-text-button">
<div class="commentRight">
<img src="~@/assets/icon_reply.png" alt="">
<span>回复</span>
</div>
<div class="commentRight">
<img src="~@/assets/icon_rubbish.png" alt="">
<span>删除</span>
</div>
</div>
<div class="reply-box">
<div class="comment-content-text">
<div class="comment-content-text-left">
<span class="comment-content-text-yuan"></span>
linda.zhao
</div>
<div class="comment-content-text-right">
<span>2023-05-18 10:51:28</span>
</div>
</div>
<div class="comment-text-box">
这里是评论内容这里是评论内容这里是评论内容这里是评论内容这里是评论内容
</div>
<div class="comment-text-button">
<div class="commentRight">
<img src="~@/assets/icon_reply.png" alt="">
</div>
<div class="commentRight">
<img src="~@/assets/icon_rubbish.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'phoneProblemKnowledgeBase',
data() {
return {}
},
methods: {
iconClick() {
this.$router.go(-1)
}
}
}
</script>
<style scoped>
.box {
padding: 0 0.4rem 0.4rem 0.4rem;
position: relative;
}
.header-search {
width: 100%;
display: flex;
position: sticky;
top: 0;
padding-top: 0.4rem;
background: #fff;
z-index: 1000;
}
.icon {
font-size: 0.66rem;
width: 0.7rem;
}
.header-search-text {
font-size: 0.44rem;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 600;
color: #040B29;
margin-left: 0.2rem;
word-break: break-all;
}
.header-buttom {
margin-top: 0.36rem;
text-align: right;
}
.header-buttom-text {
font-size: 0.34rem;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #00B3BE;
padding: 0.17rem 0.3rem;
background: rgba(0, 179, 190, 0.12);
border-radius: 0.12rem;
opacity: 1;
display: inline-block;
margin-left: 0.2rem;
}
.problemName {
display: flex;
margin-top: 0.16rem;
height: 1rem;
line-height: 1rem;
}
.problemNameLeft {
margin-right: 0.5rem;
display: flex;
align-items: center;
}
.problemNameLeftImg {
width: 0.42rem;
}
.problemNameLeftText {
font-size: 0.34rem;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #868A9A;
margin-left: 0.2rem;
margin-top: 0.07rem;
}
.content {
margin-top: 0.1rem;
font-size: 0.38rem;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #040B29;
word-break: break-all;
}
.contentFile {
margin-top: 0.2rem;
}
.contentFile-text {
font-size: 0.38rem;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #01A0AC;
margin-bottom: 0.2rem;
}
.iconText {
text-align: right;
display: flex;
justify-content: flex-end;
margin-top: 0.4rem;
padding-bottom: 0.6rem;
border-bottom: 0.02rem solid #E6E7EC;
}
.iconTextLeft-text {
font-size: 0.38rem;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
margin-left: 0.12rem;
}
.iconTextLeft {
display: flex;
align-items: center;
margin-left: 0.4rem;
}
.iconTextLeft img {
width: 0.46rem;
}
.comment {
margin-top: 0.8rem;
}
.comment-text {
width: 100%;
background: #F6F7FA;
border-radius: 0.23rem;
font-size: 0.42rem;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #868A9A;
text-align: center;
padding: 0.36rem 0;
}
.comment-content {
padding: 0.7rem 0;
box-sizing: border-box;
border-bottom: 0.02rem solid #E6E7EC;
}
.comment-content-text {
display: flex;
justify-content: space-between;
align-items: center;
}
.comment-content-text-left {
font-size: 0.42rem;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #040B29;
display: flex;
align-items: center;
}
.comment-content-text-yuan {
width: 0.2rem;
height: 0.2rem;
display: inline-block;
border-radius: 50%;
background: #01A0AC;
margin-right: 0.2rem;
}
.comment-content-text-right {
font-size: 0.34rem;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #868A9A;
}
.comment-text-box {
font-size: 0.38rem;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #41475E;
word-break: break-all;
margin-top: 0.3rem;
}
.comment-text-button {
display: flex;
align-items: center;
justify-content: flex-end;
text-align: right;
margin-top: 0.3rem;
}
.commentRight {
margin-left: 0.4rem;
display: flex;
align-items: center;
}
.commentRight img {
width: 0.44rem;
}
.commentRight span {
font-size: 0.36rem;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #868A9A;
margin-left: 0.1rem;
}
.reply-box {
background: #F6F7F8;
border-radius: 0.16rem;
padding: 0.4rem;
margin-top: 0.3rem;
margin-left: 0.5rem;
}
</style>
@@ -57,21 +57,127 @@
</div>
</van-collapse-item>
<van-collapse-item title="流程历史" name="3">
<van-steps direction="vertical" :active="1">
<van-steps inactive-icon="passed"
active-icon="passed"
active-color="#00BEBE"
direction="vertical" :active="1">
<van-step>
<h3>【城市】物流状态1</h3>
<p>2016-07-12 12:40</p>
<div class="vanStepBox">
<div class="van-text">
发起流程
<span class="van-text-color">
接受
</span>
</div>
<div class="van-time">
<span class="van-name">
Yingxi.Sun
</span>
|
<span class="van-name-time">
2016-07-12 12:40
</span>
</div>
<div class="van-desgin">
这里是反馈意见这里是反馈意见这里是反馈意见这里是反馈意见
</div>
<div class="van-file">
线控底盘技术发展与标准化需求研究报告.pdf
</div>
<div class="van-file">
线控底盘技术发展与标准化需求研究报告.pdf
</div>
</div>
</van-step>
<van-step>
<h3>【城市】物流状态2</h3>
<p>2016-07-11 10:00</p>
<div class="vanStepBox">
<div class="van-text">
发起流程
<span class="van-text-color">
接受
</span>
</div>
<div class="van-time">
<span class="van-name">
Yingxi.Sun
</span>
|
<span class="van-name-time">
2016-07-12 12:40
</span>
</div>
<div class="van-desgin">
这里是反馈意见这里是反馈意见这里是反馈意见这里是反馈意见
</div>
<div class="van-file">
线控底盘技术发展与标准化需求研究报告.pdf
</div>
<div class="van-file">
线控底盘技术发展与标准化需求研究报告.pdf
</div>
</div>
</van-step>
<van-step>
<h3>快件已发货</h3>
<p>2016-07-10 09:30</p>
<div class="vanStepBox">
<div class="van-text">
发起流程
<span class="van-text-color">
接受
</span>
</div>
<div class="van-time">
<span class="van-name">
Yingxi.Sun
</span>
|
<span class="van-name-time">
2016-07-12 12:40
</span>
</div>
<div class="van-desgin">
这里是反馈意见这里是反馈意见这里是反馈意见这里是反馈意见
</div>
<div class="van-file">
线控底盘技术发展与标准化需求研究报告.pdf
</div>
<div class="van-file">
线控底盘技术发展与标准化需求研究报告.pdf
</div>
</div>
</van-step>
</van-steps>
</van-collapse-item>
<van-collapse-item title="发起人审查" name="4">
<van-form @submit="onSubmit">
<van-field name="radio" label="处理结果">
<template #input>
<van-radio-group v-model="form.radio" direction="horizontal">
<van-radio name="1">通过</van-radio>
<van-radio name="2">退回</van-radio>
</van-radio-group>
</template>
</van-field>
<van-field
v-model="form.message"
rows="4"
class="textarea"
autosize
label="反馈意见"
maxlength="200"
type="textarea"
placeholder="请输入反馈意见"
/>
<van-field name="uploader" class="uploader" label="附件上传">
<template #input>
<van-uploader class="uploader-button">
<van-button icon="back-top" type="primary">上传</van-button>
</van-uploader>
</template>
</van-field>
</van-form>
</van-collapse-item>
</van-collapse>
</div>
</template>
@@ -81,12 +187,16 @@
name: 'phoneProcessManagement',
data() {
return {
activeNames: ['1', '2', '3']
activeNames: ['1', '2', '3', '4'],
form: {}
}
},
methods: {
iconClick() {
this.$router.go(-1)
},
onSubmit() {
}
}
}
@@ -144,14 +254,14 @@
border-width: 0;
}
::v-deep .van-cell__title span {
::v-deep .van-cell--clickable .van-cell__title span {
font-size: 0.44rem;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 600;
color: #040B29;
}
::v-deep .collapse .van-icon {
::v-deep .collapse .van-cell--clickable .van-icon {
font-size: 0.44rem;
color: #040B29;
}
@@ -198,7 +308,8 @@
margin-bottom: 0.4rem;
word-break: break-all;
}
.content-box-type-text-Two{
.content-box-type-text-Two {
display: inline-block;
font-size: 0.38rem;
font-family: PingFang SC-Regular, PingFang SC;
@@ -206,6 +317,7 @@
color: #040B29;
word-break: break-all;
}
.content-box-text {
text-align: right;
margin-left: 0.3rem;
@@ -219,4 +331,149 @@
padding: 0.5rem 0;
}
::v-deep .van-step__circle-container .van-icon {
font-size: 0.55rem;
background: #fff;
}
::v-deep .van-step--finish {
color: #00BEBE;
}
::v-deep .van-step--vertical {
padding: 0.26rem 0 0.46rem 0;
}
::v-deep .van-step--vertical:not(:last-child)::after {
border-bottom-width: 0;
}
.vanStepBox {
margin-left: 0.2rem;
}
.van-text {
font-size: 0.38rem;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 500;
color: #040B29;
}
.van-text-color {
padding: 0.19rem 0.3rem;
color: #26BD4B;
font-size: 0.34rem;
background: rgba(38, 189, 75, 0.12);
border-radius: 0.1rem;
margin-left: 0.2rem;
}
.van-time {
font-size: 0.34rem;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #868A9A;
margin-top: 0.3rem;
}
.van-name {
color: #868A9A;
margin-right: 0.1rem;
font-size: 0.34rem;
}
.van-name-time {
color: #868A9A;
margin-left: 0.1rem;
font-size: 0.34rem;
}
.van-desgin {
font-size: 0.38rem;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 500;
color: #41475E;
margin-top: 0.3rem;
word-break: break-all;
}
.van-file {
font-size: 0.38rem;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #01A0AC;
margin-top: 0.3rem;
}
::v-deep .van-form .van-cell__title {
font-size: 0.38rem;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 500;
color: #595E72;
width: 2rem;
}
::v-deep .van-form .van-radio__icon .van-icon {
width: 0.45rem;
height: 0.45rem;
line-height: 0.45rem;
}
::v-deep .van-form .van-radio__icon--checked .van-icon {
background-color: #00BEBE;
border-color: #00BEBE;
}
::v-deep .van-form .van-radio__icon {
height: 0.45rem;
}
::v-deep .van-form .van-radio__label {
font-size: 0.38rem;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 500;
color: #040B29;
}
::v-deep .van-form .van-cell {
margin-bottom: 0.3rem;
}
.textarea {
display: block;
}
::v-deep .van-form .textarea .van-field__control {
background: #F5F6F7;
border-radius: 0.12rem;
padding: 0.2rem;
margin-top: 0.1rem;
}
.uploader {
display: block;
}
.uploader-button {
margin-top: 0.2rem;
}
.uploader-button .van-button--primary {
background-color: #fff;
border: 0.03rem solid #00BEBE;
color: #01A0AC;
font-size: 0.38rem;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
}
.uploader-button .van-button {
height: 0.9rem;
border-radius: 0.12rem;
}
.uploader-button .van-button .van-icon {
font-size: 0.42rem;
font-weight: 500;
}
</style>
+6 -1
View File
@@ -27,7 +27,7 @@
<div class="text-left-top">知识分享</div>
<div class="text-left-button">已存储 568 个知识分享</div>
</div>
<div class="text-right">
<div class="text-right" @click="phoneProblemKnowledgeBaseClick">
去查看
</div>
</div>
@@ -92,6 +92,11 @@
path: '/phoneProcessManagement'
})
},
phoneProblemKnowledgeBaseClick(){
this.$router.push({
path: '/phoneProblemKnowledgeBase'
})
},
}
}
</script>