|
|
@@ -1,8 +1,40 @@
|
|
|
<template>
|
|
|
- <div class="about-container">
|
|
|
+ <div v-if="!showServer" class="about-container">
|
|
|
<top-bar></top-bar>
|
|
|
<div class="item-list">
|
|
|
-
|
|
|
+ <van-cell is-link @click="clickServe">
|
|
|
+ <!-- 使用 title 插槽来自定义标题 -->
|
|
|
+ <template #title>
|
|
|
+ <p class="item-title">
|
|
|
+ <van-icon size=".5rem" name="smile-comment-o" color="#008cd6"/>
|
|
|
+ <span class="custom-title">运维服务</span>
|
|
|
+ </p>
|
|
|
+ </template>
|
|
|
+ </van-cell>
|
|
|
+ <van-cell is-link>
|
|
|
+ <!-- 使用 title 插槽来自定义标题 -->
|
|
|
+ <template #title>
|
|
|
+ <p class="item-title">
|
|
|
+ <van-icon size=".5rem" name="info-o" color="#008cd6"/>
|
|
|
+ <span class="custom-title">操作手册</span>
|
|
|
+ </p>
|
|
|
+ </template>
|
|
|
+ </van-cell>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 消息详情 -->
|
|
|
+ <div v-else class="serve-detail">
|
|
|
+ <van-nav-bar
|
|
|
+ title="运维信息"
|
|
|
+ left-arrow
|
|
|
+ @click-left="onClickLeft"
|
|
|
+ />
|
|
|
+ <div class="detail-box" v-if="dataInfo">
|
|
|
+ <div class="message-content">
|
|
|
+ <div class="text-content">
|
|
|
+ <p>{{dataInfo.content}}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -14,14 +46,24 @@ export default {
|
|
|
components: { TopBar },
|
|
|
data() {
|
|
|
return {
|
|
|
-
|
|
|
+ showServer:false,
|
|
|
+ dataInfo:{
|
|
|
+ content:'每一代PCIe标准的速度都实现了翻倍的增长，例如我们熟悉的PCIe 3.0与PCIe 4.0，其单通道速度就分别为8GT/s与16GT/s，考虑到数据编码方案(均为128b/130b)效率，最终换算为我们更熟悉的单位时则是984.6MB/s与1969MB/s。看到这里，想必大家都能联想到PCIe 3.0与4.0固态硬盘常见的速率水平，由于它们都采用4通道，因此上限速率能够达到3500MB/s以及7000MB/s以上。\n' +
|
|
|
+ '\n' +
|
|
|
+ ' 相似的规律依旧延续到PCIe 5.0标准上，其单通道速度再次翻倍达到32GT/s，因此针对NVMe固态硬盘常见的4通道，其速率上限应该能达到15000MB/s左右。然而只需了解一下目前市面上为数不多的PCIe 5.0固态硬盘产品，就能看出它们距离这个理论上限还有一段距离。'
|
|
|
+ },
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
|
|
|
},
|
|
|
methods: {
|
|
|
-
|
|
|
+ clickServe(){
|
|
|
+ this.showServer = true;
|
|
|
+ },
|
|
|
+ onClickLeft(){
|
|
|
+ this.showServer = false;
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -30,10 +72,70 @@ export default {
|
|
|
.about-container {
|
|
|
/* 你的命名空间 */
|
|
|
.item-list {
|
|
|
- -padding: 30px 0 0 0;
|
|
|
height: calc(100vh - 400px);
|
|
|
overflow: auto;
|
|
|
- border:1px solid red;
|
|
|
+ }
|
|
|
+ .item-title{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .custom-title{
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.message-detail{
|
|
|
+ height: calc(100vh - 102px)
|
|
|
+}
|
|
|
+.detail-box{
|
|
|
+ height: calc(100% - 90px);
|
|
|
+ overflow: auto;
|
|
|
+ background-color: #fff;
|
|
|
+ margin: 20px;
|
|
|
+}
|
|
|
+.msg-title{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 100%;
|
|
|
+ padding: 2.666667vw 4.266667vw;
|
|
|
+ overflow: hidden;
|
|
|
+ color: #323233;
|
|
|
+ font-size: 3.733333vw;
|
|
|
+ line-height: 6.4vw;
|
|
|
+ border-bottom: 1px solid #f5f5f5;
|
|
|
+}
|
|
|
+.message-content {
|
|
|
+ width: 100%;
|
|
|
+ padding: 20px 30px 20px 30px;
|
|
|
+ height: 100%;
|
|
|
+ overflow: auto;
|
|
|
+
|
|
|
+ .text-content {
|
|
|
+ width: 100%;
|
|
|
+ min-height: 40px;
|
|
|
+ overflow: auto;
|
|
|
+
|
|
|
+ > p {
|
|
|
+ text-indent: 2em;
|
|
|
+ word-break: break-word;
|
|
|
+ white-space: pre-wrap;
|
|
|
+ text-align: justify;
|
|
|
+ width: 100%;
|
|
|
+ color: #777;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .file-box {
|
|
|
+ width: 100%;
|
|
|
+ min-height: 40px;
|
|
|
+ padding: 20px 0;
|
|
|
+
|
|
|
+ > div {
|
|
|
+ line-height: 32px;
|
|
|
+ padding-left: 20px;
|
|
|
+ margin: 10px 0;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|
coys