黑龙江

src/project/hljjm/AppChildrenInfo/AppChildrenDetailView.vue

@@ -0,0 +1,156 @@
+<template>
+  <section class="AppChildrenDetailView">
+    <div class="info-list">
+      <div class="item" v-for="(item, index) in list" :key="index">
+        <div class="title-flex">
+          <div class="item-title">{{item.title}}</div>
+          <img src="https://cdn.sinoecare.com/i/2024/09/06/66da67b778d99.png" alt="" :class="item.isView ? 'right-icon' : 'right-icon right-icon-active'" @click="view(index)">
+        </div>
+        <div class="item-content" v-if="item.isView">
+          <!-- <div class="item-form" v-for="(items, indexs) in item.infoList" :key="indexs">
+            <div class="label">{{items.label}}</div>
+            <div class="value">{{items.value}}</div>
+          </div> -->
+          <p>详细基本信息，包括儿童的健康状态、患病情况、工学情况等</p>
+        </div>
+      </div>
+    </div>
+    <div class="footer-btn">
+      <div class="btn">返回</div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "AppChildrenDetailView",
+  appName: "儿童详细信息",
+  data() {
+    return {
+      list: [
+        {
+          title: '详细基本信息',
+          isView: false,
+        },
+        {
+          title: '父母信息',
+          isView: false,
+        }
+      ]
+    }
+  },
+  onLoad() {
+    uni.setNavigationBarColor({
+      frontColor: '#ffffff',
+      backgroundColor: '#2183FF'
+    })
+    uni.setNavigationBarTitle({
+      title: '儿童详细信息'
+    })
+  },
+  methods: {
+    view(index) {
+      this.list[index].isView = !this.list[index].isView
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+uni-page-body {
+  background-color: #F5F6F7;
+}
+.AppChildrenDetailView {
+  .info-list {
+    .item {
+      box-sizing: border-box;
+      background-color: #fff;
+      .title-flex {
+        width: calc(100% - 32px);
+        display: flex;
+        line-height: 42px;
+        margin-left: 32px;
+        border-bottom: 1px solid #E4E5E6;
+        .item-title {
+          width: calc(100% - 80px);
+          padding: 40px 0 34px 0;
+          line-height: 42px;
+          font-family: PingFangSC-Medium;
+          font-weight: 500;
+          font-size: 30px;
+          color: #333;
+        }
+        .right-icon {
+          width: 40px;
+          height: 40px;
+          padding: 20px;
+          transform: rotate(-90deg);
+          transition: all 0.3s ease-in-out;
+          margin-top: 10px;
+        }
+        .right-icon-active {
+          transform: rotate(90deg);
+        }
+      }
+      .item-content {
+        padding: 20px 32px;
+        box-sizing: border-box;
+        background-color: #F5F6F7;
+        p {
+          width: 100%;
+          line-height: 40px;
+          font-family: PingFangSC-Medium;
+          font-weight: 500;
+          font-size: 28px;
+          color: #999;
+          word-break: break-all;
+        }
+
+        // .item-form {
+        //   width: 100%;
+        //   padding: 16px 20px 16px 0;
+        //   border-bottom: 1px solid #E4E5E6;
+        //   box-sizing: border-box;
+        //   word-break: break-all;
+        //   font-family: PingFangSC-Regular;
+        //   .label {
+        //     height: 44px;
+        //     font-size: 32px;
+        //     color: #999;
+        //     margin-bottom: 20px;
+        //   }
+        //   .value {
+        //     line-height: 40px;
+        //     font-size: 28px;
+        //     color: #222;
+        //     letter-spacing: 0;
+        //   }
+        // }
+      }
+    }
+  }
+  .footer-btn {
+    width: 100%;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    padding: 16px 32px 52px 16px;
+    box-sizing: border-box;
+    background-color: #fff;
+    z-index: 9;
+    .btn {
+      width: 100%;
+      text-align: center;
+      height: 96px;
+      line-height: 94px;
+      border: 1px solid #2183FF;
+      border-radius: 8px;
+      font-family: PingFangSC-Medium;
+      font-weight: 500;
+      font-size: 32px;
+      color: #2183FF;
+      margin-bottom: 16px;
+    }
+  }
+}
+</style>