我的页面修改

src/components/weatherBox/index.vue

@@ -92,7 +92,9 @@ export default {
         //   },
         // ]
         //this.lists = str;
-        this.changeColor(0);
+        if(this.lists.length > 0){
+          this.changeColor(0);
+        }
       })
     },
     changeColor(index){

src/views/home/isMy.vue

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