添加手机端

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
@@ -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>