home

src/assets/css/font-color.css

@@ -2,6 +2,14 @@
   color: #000000;
 }
 
+.fc-6 {
+  color: #666;
+}
+
 .fc-f {
   color: #fff;
 }
+
+.fc-sys1 {
+  color: #3abfff;
+}

src/assets/css/font-size.css

+
+.fs-24 {
+  font-size: 0.24rem;
+}
+
 .fs-36 {
   font-size: 0.36rem;
 }

src/assets/css/font-weight.css

 .fw-5 {
   font-weight: 500;
 }
+
+.fw-4 {
+  font-weight: 400;
+}
\ No newline at end of file

src/views/Home/child_cpn/FormQuery.vue

@@ -9,11 +9,37 @@
         </div>
         <div>
           <span>宝宝性别</span>
-          <input type="text" />
+          <div class="gender-select">
+            <template v-for="item in genderInfo">
+              <div :key="item.id" @click="selectGender(item)">
+                <img
+                  class="gender-img"
+                  :src="item.status ? item.src_active : item.src"
+                  alt=""
+                />
+                <span class="fs-36 fw-4 fc-6">{{ item.gender }}</span>
+              </div>
+            </template>
+          </div>
         </div>
         <div>
           <span>出生日期</span>
-          <input type="text" placeholder="请选择出生日期或预产期" />
+          <input
+            type="date"
+            v-model="date"
+            style="border: 1px solid #ffa3cf; border-radius: 5px"
+            placeholder="请选择出生日期或预产期"
+            @change="dateChange"
+          />
+        </div>
+      </div>
+
+      <!-- 用户服务协议 -->
+      <div class="user-agreement fs-24">
+        <div>起名信息仅会用于起名及姓名析义，查看</div>
+        <div>
+          <a href="javascript:;">《用户服务协议》、</a>
+          <a href="javascript:;">《隐私权协议》</a>
         </div>
       </div>
     </div>
@@ -22,7 +48,54 @@
 </template>
 
 <script>
-export default {};
+import active from "@/assets/img/home/active.png";
+import deactive from "@/assets/img/home/deactive.png";
+export default {
+  data() {
+    return {
+      date: "",
+      genderInfo: [
+        {
+          src: deactive,
+          gender: "男",
+          id: 1,
+          status: true,
+          src_active: active,
+        },
+        {
+          src: deactive,
+          gender: "女",
+          id: 2,
+          status: false,
+          src_active: active,
+        },
+        {
+          src: deactive,
+          gender: "未出生",
+          id: 3,
+          status: false,
+          src_active: active,
+        },
+      ],
+    };
+  },
+
+  methods: {
+    dateChange() {
+      console.log(this.date);
+    },
+
+    selectGender(item) {
+      this.genderInfo.map((option) => {
+        if (item.id == option.id) {
+          return (item.status = true);
+        } else {
+          return (option.status = false);
+        }
+      });
+    },
+  },
+};
 </script>
 
 <style>
@@ -54,7 +127,7 @@ export default {};
 
 .baby-form {
   position: absolute;
-  top: 1.82rem;
+  top: 1.28rem;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -91,4 +164,51 @@ export default {};
   line-height: 0.36rem;
   margin-right: -1rem;
 }
+
+.gender-select {
+  width: 3.96rem;
+  height: 0.36rem;
+  display: flex;
+  justify-content: start;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+
+.gender-select > div {
+  flex: 1;
+  display: flex;
+  justify-content: start;
+  align-items: center;
+}
+
+.gender-select img {
+  margin-right: 0.04rem;
+}
+
+.gender-img {
+  width: 0.3rem;
+  height: 0.3rem;
+}
+
+.user-agreement {
+  position: absolute;
+  top: 3.52rem;
+  display: flex;
+  width: 100%;
+  height: 0.6rem;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.user-agreement > div {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+a {
+  text-decoration: none;
+  color: #3abfff;
+}
 </style>
\ No newline at end of file