회원가입-아기정보변경-질환없음

3 years ago · e74f20eb13
parent 43e052530e
commit e74f20eb13
2 changed files with 372 additions and 2 deletions
--- a/src/main/webapp/m/css/style.css
+++ b/src/main/webapp/m/css/style.css
@ -1564,8 +1564,9 @@ main {
 }

 .profile_wrap .p_list_item .p_btn.active {
-    color: #ff9c00;
-    border: 2px solid #ff9c00;
+  background-color: #ff9c00;
+  border: 2px solid #ff9c00;
+  color: white;
 }

 .profile_wrap .p_list_item .p_btn.active .icon {
@ -4859,6 +4860,15 @@ main {
    font-weight: 500;
 }

+/*회원가입 - 아기정보입력*/
+.p_list_item.child_box {
+  padding: 0 20px;
+  overflow: hidden;
+  border: 1px solid #ff9c01;
+  border-radius:7px;
+  margin: 0 20px;
+  margin-bottom: 9px;
+}

 /*공통*/

@ -16855,3 +16865,75 @@ progress::-webkit-progress-value {
  color: #fff;
  margin-top: 60px;
 }
+
+/*질환선택*/
+
+.disease_box{
+  margin: 0 20px;
+}
+.profile_wrap .disease_box .p_btn {
+  flex: 0 0 48%;
+  height: 45px;
+  line-height: 40px;
+  white-space: nowrap;
+  border: 1px solid #ff990c;
+}
+.profile_wrap .disease_box .p_btn {
+  flex: 0 0 48%;
+  height: 45px;
+  line-height: 40px;
+  white-space: nowrap;
+  border: 1px solid #ff990c;
+  border-radius: 10px;
+}
+
+.profile_wrap .disease_box .p_btn.active {
+background-color: #ff9c00;
+border: 2px solid #ff9c00;
+color: white;
+}
+
+/*아기정보변경*/
+.setting_header_child_top .proimg {
+  width: 70px;
+  height: 70px;
+  margin: 0 auto 20px;
+}
+
+.setting_header_child_top .proimg img {
+  width: 100%;
+  border-radius: 60px;
+  box-shadow: 0 0 2px;
+}
+
+.setting_header_child_top p {
+  line-height: 20px;
+}
+
+.setting_header_child_top{
+  border: 1px solid #FF9C01;
+  border-radius: 9px;
+  margin: 0 20px;
+  height: 89px;
+}
+.setting_header_child_top div {
+  align-items: center;
+  display: inline-flex;
+  padding: 8px 0 0 16px;
+}
+
+.setting_header_child_top p span {
+  display: block;
+}
+
+.setting_header_child_top p.info {
+  font-size: 14px;
+  line-height: 24px;
+}
+
+.setting_header_child_top p.info .name {
+  font-size: 15px;
+  color: #000000D4;
+  margin-bottom: 17px;
+  margin-left: 10px;
+}
--- a/src/main/webapp/m/html/5.회원가입-아기정보입력-질환없음.html
+++ b/src/main/webapp/m/html/5.회원가입-아기정보입력-질환없음.html
@ -0,0 +1,288 @@
+<!DOCTYPE html>
+<html lang="ko">
+
+<head>
+  <meta charset="utf-8">
+  <meta content="IE=Edge" http-equiv="X-UA-Compatible" />
+  <meta name="viewport"
+    content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
+  <title>아이 정보 변경 </title>
+  <link rel="shortcut icon" href="../../img/favicon.ico">
+  <link rel="stylesheet" href="../css/style.css">
+  <link rel="stylesheet" href="../../css/anypicker-all.css">
+  <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
+  <script type="text/javascript" src="../js/anypicker.min.js"></script>
+</head>
+
+<body class="bg_setting">
+  <div class="wrap">
+    <header class="header_wrapper">
+      <a href="javascript:history.back();" class="side_Lbtn hidden pre_btn">이전으로</a>
+      <h1 class="header_title">아기 정보 입력</h1>
+      <a href="#" class="side_Rbtn hidden"></a>
+    </header>
+    <main class="m_child_profile" id="top_move">
+      <div class="profile_wrap">
+        <div class="profile_header">
+
+          <div class="profile_list">
+            <h2 class="p_sub_title">아기 사진 등록</h2>
+            <div class="setting_header_child_top">
+              <div>
+                <p class="proimg"><img src="../img/main/nutrition_cont_img_camera.png" alt="프로필 사진" /></p>
+                <p class="info"><span class="name">사진을 등록해주세요</span></p>
+              </div>
+            </div>
+            <h2 class="p_sub_title">아기 이름<span style="color:#FF9C01">*</span></h2>
+            <div class="p_list_item child_box">
+              <label for="child_name" class="p_label">아기 이름</label>
+              <div class="p_input_box">
+                <input type="text" id="" name="child_birthday" class="" placeholder="아기 이름">
+              </div>
+            </div>
+
+            <h3 class="p_sub_title">아기 성별<span style="color:#FF9C01">*</span></h3>
+            <div class="p_list_item gender_box">
+              <button type="button" id="" name="" class="active p_btn p_border_box">
+                <span class="hidden icon">체크박스</span>여자
+              </button>
+              <button type="button" id="" name="" class="p_btn p_border_box">
+                <span class="hidden icon">체크박스</span>남자
+              </button>
+            </div>
+          </div>
+        </div>
+        <div class="profile_cont">
+          <h2 class="p_sub_title">기본 정보 입력</h2>
+          <div class="p_list_item child_box">
+            <label for="child_birthday" class="p_label">생년월일<span style="color:#FF9C01">*</span></label>
+            <div class="p_input_box">
+              <input type="text" id="child_birthday" name="child_birthday" class="" placeholder="YYYY. MM.DD">
+            </div>
+          </div>
+          <div class="p_list_item child_box">
+            <label for="birth_weight" class="p_label">출생시각</label>
+            <div class="p_input_box">
+              <input type="text" id="birth_weight" name="birth_weight" class="" placeholder="">
+              <span class="unit">시</span>
+            </div>
+          </div>
+          <div class="p_list_item child_box">
+            <label for="birth_height" class="p_label">출생 시 몸무게</label>
+            <div class="p_input_box">
+              <input type="text" id="birth_height" name="birth_height" class="" placeholder="">
+              <span class="unit">kg</span>
+            </div>
+          </div>
+          <div class="p_list_item child_box">
+            <label for="birth_height" class="p_label">출생 시 키</label>
+            <div class="p_input_box">
+              <input type="text" id="birth_height" name="birth_height" class="" placeholder="">
+              <span class="unit">cm</span>
+            </div>
+          </div>
+          <div class="p_list_item child_box">
+            <label for="birth_height" class="p_label">출생 시 머리둘레</label>
+            <div class="p_input_box">
+              <input type="text" id="birth_height" name="birth_height" class="" placeholder="">
+              <span class="unit">cm</span>
+            </div>
+          </div>
+        </div>
+
+        <h2 class="p_sub_title">질환</h2>
+        <div class="p_list_item disease_box">
+          <button type="button" id="" name="" class="p_btn p_border_box">
+            <span class="hidden icon">체크박스</span>있음
+          </button>
+          <button type="button" id="" name="" class="active p_btn p_border_box">
+            <span class="hidden icon">체크박스</span>없음
+          </button>
+        </div>
+        <h3 class="p_sub_title"><span style="color:#FF9C01">*</span>표시로 되어 있는 칸은 필수 입력칸입니다.</h3>
+        <div class="profile_btn_box">
+          <button type="button" id="" name="" class="btns blue_btn">저장</button>
+          <button type="button" id="" name="" class="btns grey_btn">건너뛰기</button>
+
+        </div>
+
+      </div>
+    </main>
+  </div>
+  <script type="text/javascript">
+    $(function () {
+      $(".gender_box button, .disease_box button").on("click", function () {
+        $(this).addClass("active").siblings().removeClass("active");
+      })
+    })
+
+    //프로필 입력
+    var oArrData = [];
+
+    function createDataSource(s, e, sel) {
+      var oArrData = [];
+
+      for (i = s; i < e; i++) {
+        bSelected = (i === sel) ? true : false;
+        oArrData.push({
+          val: i.toString(),
+          label: i.toString(),
+          selected: bSelected
+        });
+      }
+
+      return oArrData;
+    }
+
+    function cfFormatOutput(oSelectedValues) {
+      var apo = this,
+        sArrOutput = [],
+        sTempStr = "",
+        iTempIndex;
+      for (iTempIndex = 0; iTempIndex < apo.tmp.numOfComp; iTempIndex++) {
+        sArrOutput.push(oSelectedValues.values[iTempIndex].label.toString());
+      }
+      sTempStr = sArrOutput[0] + "." + sArrOutput[1];
+      return sTempStr
+    }
+
+    function cfParseInput(sElemValue) {
+      var apo = this;
+      var oArrInput = [];
+
+      if (sElemValue !== undefined && sElemValue !== null && sElemValue !== "") {
+        sArrValue = sElemValue.split('.');
+
+        if (sArrValue !== undefined && sArrValue !== null && sArrValue !== "") {
+          if (sArrValue.length == 1) {
+            oArrInput = [sElemValue, 0];
+          } else if (sArrValue.length == 2) {
+            oArrInput = sArrValue;
+          }
+        }
+      } else {
+        oArrInput = ["50", "0"];
+      }
+
+      return oArrInput;
+    }
+    /*엄마,아빠,희망키*/
+    var heightComponents = [{
+      component: 0,
+      name: "height01",
+      label: "",
+      width: "50%",
+      textAlign: "center"
+    }, {
+      component: 1,
+      name: "height02",
+      label: "",
+      width: "50%",
+      textAlign: "center"
+    }],
+      heightDataSource = [{
+        component: 0,
+        data: createDataSource(130, 200, 100)
+      }, {
+        component: 1,
+        data: createDataSource(0, 10, 3)
+      }];
+    /*출생시 체중*/
+    var weightComponents = [{
+      component: 0,
+      name: "weight01",
+      label: "",
+      width: "50%",
+      textAlign: "center"
+    }, {
+      component: 1,
+      name: "weight02",
+      label: "",
+      width: "50%",
+      textAlign: "center"
+    }],
+      weightDataSource = [{
+        component: 0,
+        data: createDataSource(1, 10, 100)
+      }, {
+        component: 1,
+        data: createDataSource(0, 10, 3)
+      }];
+    /*출생시 키*/
+    var b_heightComponents = [{
+      component: 0,
+      name: "height01",
+      label: "",
+      width: "50%",
+      textAlign: "center"
+    }, {
+      component: 1,
+      name: "height02",
+      label: "",
+      width: "50%",
+      textAlign: "center"
+    }],
+      b_heightDataSource = [{
+        component: 0,
+        data: createDataSource(30, 130, 100)
+      }, {
+        component: 1,
+        data: createDataSource(0, 10, 3)
+      }];
+
+
+
+    //사진 추가
+    $(function () {
+      // File Upload + Preview
+      $('.input_file_upload .btn_upfile').on('click', function () {
+        $(this).siblings('.upfile').trigger('click');
+      });
+      $('.profile_imgbox .ibtn_x').on('click', function () {
+        $(this).addClass('off').siblings().find('.add_thumb')
+          .addClass('off').find('img').remove();
+        $(this).siblings('.upfile').val('');
+        $('#append_src_img_file_0').val('');
+        $('#append_300_img_file_0').val('');
+      });
+      $(".input_file_upload input[type=file]").change(function () {
+        var file = $(this)[0].files[0];
+        //console.log(file.name + "\n" + file.type + "\n" + file.size + "\n" + file.lastModifiedDate); // upfile var
+        if ($(this).hasClass('file_mypage')) {
+          $(this).talkImage(file, '.add_thumb');
+        } else {
+          $(this).displayImage(file, '.add_thumb');
+        }
+        $(this).siblings('.add_thumb').removeClass('off')
+          .parent().siblings('.ibtn_x').removeClass('off');
+      });
+      $.fn.extend({
+        // Upload preview Function
+        displayImage: function (file, classname) {
+          if (typeof FileReader !== "undefined") {
+            // var container = document.getElementsByClassName(classname),
+            //     img = document.createElement("img"),
+            //     reader;
+            $('#add_thumb').addClass('off').find('img').remove();
+            var container = $(this).siblings(classname),
+              img = document.createElement("img"),
+              reader;
+            img.setAttribute('width', '100%'),
+              img.setAttribute('height', '100%'),
+              //console.log($(this));
+              container.append(img);
+            reader = new FileReader();
+            reader.onload = (function (theImg) {
+              return function (evt) {
+                theImg.src = evt.target.result;
+              };
+            }(img));
+            reader.readAsDataURL(file);
+          }
+        },
+      });
+    });
+  </script>
+</body>
+
+</html>