java
/
bf
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

퍼블리싱 - 기록 사진 3개 업로드, 대표 사진 설정 퍼블리싱

Browse Source
dev_bert
Isol 3 years ago
parent e282898539
commit 7eddddcf30
2 changed files with 590 additions and 5 deletions
Show Stats Download Patch File Download Diff File

80
src/main/webapp/m/css/style.css
Unescape View File

@ -6361,8 +6361,8 @@ main {
.nutrition_camera .img_preview {
position: relative;
overflow: hidden;
width: 260px;
height: 250px;
width: 16rem;
height: 15rem;
margin: 0 auto;
background: #fff;
border: 5px solid #fff;
@ -6370,12 +6370,25 @@ main {
box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}
.nutrition_camera .img_preview label {
.nutrition_camera .img_preview .img_label {
display: block;
width: 100%;
height: auto;
}
.nutrition_camera .star + label svg {
position: absolute;
width: 20px;
height: 20px;
top: 10px;
left: 15px;
fill: rgba(0, 0, 0, 0.1);
}
.nutrition_camera .star:checked + label svg {
fill: #FF9C00;
}
.nutrition_camera .img_preview img {
position: absolute;
width: 100%;
@ -6386,6 +6399,40 @@ main {
object-fit: cover;
}
.nutrition_camera .swiper-container {
padding: 5px 0;
}
.nutrition_camera .pagination_container {
display: flex;
justify-content: center;
margin-top: 10px;
}
.nutrition_camera .swiper-pagination {
width: 3rem;
display: flex;
justify-content: space-between;
}
.nutrition_camera .swiper-pagination-bullet {
width: 12px;
height: 12px;
border: 1px solid #707070;
background-color: #fff;
opacity: 1;
}
.nutrition_camera .swiper-pagination-bullet-active {
width: 12px;
height: 12px;
transition: width .5s;
border-radius: 50%;
background: #6A6A6A;
border: 1px solid transparent;
}
.nutrition_kinds {}
.nutrition_kinds_list {
@ -13467,9 +13514,11 @@ main.sona_cont_measurement {
.w_div{
background: #fff;
padding:20px;
border-radius: 20px;
border: 1px solid;
border-radius: 10px;
box-sizing: border-box;
margin-bottom: 20px;
margin: 0 0.2rem 20px;
}
.take_time{
@ -13630,6 +13679,17 @@ main.sona_cont_measurement {
.milk_sel{
width:100%;
height: 30px;
border: 1px solid;
font-size: 14px;
line-height: 30px;
padding:0 15px;
border-radius: 20px;
margin-bottom: 10px;
}
.milk_select{
width:100%;
height: 50px;
color: #fff;
background: #C3C3C3;
font-size: 14px;
@ -13637,6 +13697,8 @@ main.sona_cont_measurement {
padding:0 15px;
border-radius: 20px;
margin-bottom: 10px;
display: flex;
align-items: center;
}
.amount_div{
@ -13682,7 +13744,8 @@ main.sona_cont_measurement {
border:0;
font-size: 12px;
outline: 0;
border: 1px solid #CFCFCF;
/* border: 1px solid #CFCFCF; */
resize: none;
}
.memo textarea::placeholder{
@ -15323,6 +15386,13 @@ main.sona_cont_measurement {
text-align: center;
}
.description1 {
color: #707070;
font-size: 0.8rem;
text-align: center;
margin-bottom: 2rem;
}
.bf_food_modal .cart_list {
display: flex;
flex-direction: column;

515
src/main/webapp/m/html/bf_growth_record/9-2.기록-젖병.html
Unescape View File

@ -0,0 +1,515 @@
<!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">
<script type="text/javascript" src="../../js/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="../../css/swiper.min.css">
<script src="../../js/swiper.min.js"></script>
<link rel="stylesheet" href="../../css/anypicker-all.css">
<script type="text/javascript" src="../../js/anypicker.min.js"></script>
</head>
<body>
<!-- wrap -->
<div class="wrap" id="view_sn_nutrition_powderedmilk">
<!-- header_sub -->
<header class="header_wrapper">
<a href="javascript:history.back();" class="side_Lbtn hidden pre_btn">이전으로</a>
<h1 class="header_title">젖병</h1>
<div class="side_Rbtn">
<a href="#" class="nutrition_subMain_delete">
<img src="../../img/nutrition/nutrition_subMain_delete_ico.png" alt="휴지통 아이콘">
</a>
</div>
</header>
<!-- //header_sub -->
<!-- main_nutrition -->
<main class="main_nutrition">
<!-- nutrition_header_child -->
<div class="nutrition_header_child">
<div class="nutrition_header_child_top">
<div style="display: flex; align-items: center;">
<p class="proimg"><img src="../../img/main/nutrition_cont_img_camera.png" alt="프로필 사진" /></p>
<p class="info"><span class="name">소희</span><span class="age">1세 2개월 (여)</span></p>
</div>
<!-- <p class="allergy">알러지: 두유, 우유</p> -->
<p class="cal"><span class="date">2021.04.06</span><span class="clock">10:56AM</span></p>
</div>
</div>
<!-- //nutrition_header_child -->
<!-- nutrition_camera -->
<div class="nutrition_camera">
<div class="nutrition_camera_box">
<div class="swiper-container">
<ul class="swiper-wrapper">
<li class="swiper-slide">
<div class="img_preview">
<label for="append_src_img_file01" class="img_label">
<img id="img_preview01" src="../../img/main/main_cont_img_camera.png" alt="사진영역" />
</label>
<input type="radio" id="append_src_img_star01" name="append_src_img_star" class="star">
<label for="append_src_img_star01">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
</svg>
</label>
</div>
</li>
<li class="swiper-slide">
<div class="img_preview">
<label for="append_src_img_file02" class="img_label">
<img id="img_preview02" src="../../img/main/main_cont_img_camera.png" alt="사진영역" />
</label>
<input type="radio" id="append_src_img_star02" name="append_src_img_star" class="star">
<label for="append_src_img_star02">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
</svg>
</label>
</div>
</li>
<li class="swiper-slide">
<div class="img_preview">
<label for="append_src_img_file03" class="img_label">
<img id="img_preview03" src="../../img/main/main_cont_img_camera.png" alt="사진영역" />
</label>
<input type="radio" id="append_src_img_star03" name="append_src_img_star" class="star">
<label for="append_src_img_star03">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16">
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
</svg>
</label>
</div>
</li>
</ul>
</div>
<input type="file" id="append_src_img_file01" name="append_src_img_file">
<input type="file" id="append_src_img_file02" name="append_src_img_file">
<input type="file" id="append_src_img_file03" name="append_src_img_file">
<div class="pagination_container">
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<!-- //nutrition_camera -->
<div class="description1">
* 표시된 사진이 공유 시 대표사진으로 설정됩니다.
</div>
<!-- nutrition_kinds -->
<div id="nutrition_kinds" class="nutrition_kinds">
<!-- wrap -->
<div class="nutrition_kinds_content">
<style>
.type_tab li.current{
background-color:#FF9933;
}
</style>
<!-- 분유, 유축수유 탭 -->
<div class="milk_type">
<ul class="type_tab" style="border-color: #FF9933;">
<li class="current" data-tab="tab1"><a href="javascript:void(0);">분유</a></li>
<li data-tab="tab2"><a href="javascript:void(0);">유축수유</a></li>
</ul>
</div>
<!-- //분유, 유축수유 탭 -->
<!-- 분유 -->
<div class="milk_powder">
<!-- 섭취시간 -->
<div class="take_time w_div" style="border-color: #FF9933;">
<div class="sound_icon">
<button type="button">
<img src="../../img/nutrition/ico_sound_off_black_18.png" alt="">
</button>
</div>
<div class="flex">
<button type="button" class="border_btn">잠시멈춤</button>
<div class="bg_border">
<div class="bg_full">
<p>섭취시작</p>
<span>00:00</span>
</div>
</div>
<button type="button" class="border_btn">완료</button>
</div>
</div>
<!-- //섭취시간 -->
<!-- 시간 -->
<div class="time_result w_div" style="border-color: #FF9933;">
<div class="time_div">
<div class="border_b_input">
<input type="text" name="" value="" readonly />
<p>분</p>
</div>
<div class="border_b_input">
<input type="text" name="" value="" readonly />
<p>초</p>
</div>
</div>
<div class="time_btn_div">
<button type="button" class="border_btn">-5분</button>
<button type="button" class="border_btn">-1분</button>
<button type="button" class="border_btn">1분</button>
<button type="button" class="border_btn">5분</button>
</div>
</div>
<!-- //시간 -->
<!-- 분유 입력 -->
<div class="milk_input w_div" style="border-color: #FF9933;">
<p class="record_title">* 분유를 입력해주세요.</p>
<div class="milk_sel" style="border-color: #FF9933;">분유 1</div>
<div class="milk_sel" style="border-color: #FF9933;">분유 2</div>
<div class="milk_search_div">
<input type="text" name="" placeholder="분유 검색창">
<button type="button" class="g_search_btn">검색</button>
</div>
<div class="milk_select" style="background-color: #FF9933;">선택된 분유</div>
</div>
<!-- //분유 입력 -->
<!-- 수유량 -->
<div class="take_amount w_div" style="border-color: #FF9933;">
<div class="amount_div">
<p class="record_title">수유량</p>
<div class="po_div">
<div class="border_b_input">
<input type="text" name="" value="" readonly />
<p>ml</p>
</div>
</div>
</div>
<div class="time_btn_div">
<button type="button" class="border_btn">-10ml</button>
<button type="button" class="border_btn">-5ml</button>
<button type="button" class="border_btn">5ml</button>
<button type="button" class="border_btn">10ml</button>
<button type="button" class="border_btn">20ml</button>
</div>
<p class="small_note">* 섭취량 미 입력 시 영양점수에 반영되지 않습니다.</p>
</div>
<!-- //수유량 -->
<!-- 메모 -->
<div class="memo w_div" style="border-color: #FF9933;">
<p class="record_title">* 메모</p>
<textarea name="name" rows="5" cols="80" placeholder="감정 / 생각 / 아이 반응 등을 기록해주세요."></textarea>
<div class="memo_btn_div">
<div class="memo_btn">
<button type="button" class="g_br_btn">잘 먹어서 너무 좋다</button>
<button type="button" class="g_br_btn">너무 힘들다</button>
</div>
<div class="img_btn">
<img src="../../../img/nutrition/ico_menu_black_24.png" alt="">
<img src="../../../img/nutrition/ico_add_black_24.png" alt="">
</div>
</div>
</div>
<!-- //메모 -->
</div>
<!-- //분유 -->
<!-- 유축수유 -->
<div class="breastfeeding">
<!-- 수유량 -->
<div class="take_amount w_div" style="border-color: #FF9933;">
<div class="amount_div">
<p class="record_title">수유량</p>
<div class="po_div">
<div class="border_b_input">
<input type="text" name="" value="" readonly />
<p>ml</p>
</div>
</div>
</div>
<div class="time_btn_div">
<button type="button" class="border_btn">-10ml</button>
<button type="button" class="border_btn">-5ml</button>
<button type="button" class="border_btn">5ml</button>
<button type="button" class="border_btn">10ml</button>
<button type="button" class="border_btn">20ml</button>
</div>
<p class="small_note">* 섭취량 미 입력 시 영양점수에 반영되지 않습니다.</p>
</div>
<!-- //수유량 -->
<!-- 섭취시간 -->
<div class="take_time w_div" style="border-color: #FF9933;">
<div class="sound_icon">
<button type="button">
<img src="../../img/nutrition/ico_sound_on_black_18.png" alt="">
</button>
<button type="button">
<img src="../../img/nutrition/ico_sound_off_black_18.png" alt="">
</button>
</div>
<div class="flex">
<button type="button" class="border_btn">잠시멈춤</button>
<div class="bg_border">
<div class="bg_full">
<p>수유시작</p>
<span>00:00</span>
</div>
</div>
<button type="button" class="border_btn">완료</button>
</div>
</div>
<!-- //섭취시간 -->
<!-- 시간 -->
<div class="time_result w_div" style="border-color: #FF9933;">
<div class="time_div">
<div class="border_b_input">
<input type="text" name="" value="" readonly />
<p>분</p>
</div>
<div class="border_b_input">
<input type="text" name="" value="" readonly />
<p>초</p>
</div>
</div>
<div class="time_btn_div">
<button type="button" class="border_btn">-5분</button>
<button type="button" class="border_btn">-1분</button>
<button type="button" class="border_btn">1분</button>
<button type="button" class="border_btn">5분</button>
</div>
</div>
<!-- //시간 -->
<!-- 메모 -->
<div class="memo w_div" style="border-color: #FF9933;">
<p class="record_title">* 메모</p>
<textarea name="name" rows="5" cols="80" placeholder="감정 / 생각 / 아이 반응 등을 기록해주세요."></textarea>
<div class="memo_btn_div">
<div class="memo_btn">
<button type="button" class="g_br_btn">잘 먹어서 너무 좋다</button>
<button type="button" class="g_br_btn">너무 힘들다</button>
</div>
<div class="img_btn">
<img src="../../../img/nutrition/ico_menu_black_24.png" alt="">
<img src="../../../img/nutrition/ico_add_black_24.png" alt="">
</div>
</div>
</div>
<!-- //메모 -->
</div>
<!-- //유축수유 -->
</div>
<!-- //wrap -->
<!-- nutrition_kinds_btn -->
<div class="nutrition_kinds_btn nutrition_common">
<a href="javascript:void(0);">기록 완료</a>
</div>
<!-- //nutrition_kinds_btn -->
</div>
</div>
<!-- nutrition_kinds -->
</main>
<!-- //main_nutrition -->
</div>
<!-- //wrap -->
<!-- 하단 네비 iyu_nav -->
<nav class="iyu_nav">
<ul>
<li class="nav_list01">
<a href="../../sn_nutrition/view_sn_nutrition_main.html">
<div class="icon">영양</div>
<div class="tit">영양</div>
</a>
</li>
<li class="nav_list02">
<a href="../../sn_growth_body/view_sn_growth_main.html">
<div class="icon">성장</div>
<div class="tit">성장</div>
</a>
</li>
<li class="nav_list03">
<a href="../../sn_index/index.html">
<div class="icon">홈</div>
<div class="tit">홈</div>
</a>
</li>
<li class="nav_list04">
<a href="../../sn_food_information/view_sn_food_information_main.html">
<div class="icon">식품정보</div>
<div class="tit">식품정보</div>
</a>
</li>
<li class="nav_list05">
<a href="../../sn_community/list_sn_community.html">
<div class="icon">커뮤니티</div>
<div class="tit">커뮤니티</div>
</a>
</li>
</ul>
</nav>
<!-- //iyu_nav -->
</body>
<script>
// 클래스 추가 삭제시 (검색>이전입력)
$(".search_pre_input>a").click(function (e) {
e.stopPropagation();
if (!$(this).hasClass("active")) {
$(this).siblings().removeClass("active");
$(this).addClass("active");
}
});
// nutrition_kinds 탭메뉴
$('#nutrition_kinds').find('.nutrition_kinds_list li').on('click', 'a', function () {
var $parent = $(this).parent();
var idx = $parent.index();
$parent.addClass('active').siblings().removeClass('active');
$('.kinds_tabcont').eq(idx).addClass('active').siblings().removeClass('active');
});
// 클래스 추가 삭제시
$(".li_check>li").click(function (e) {
e.stopPropagation();
if (!$(this).hasClass("active")) {
$(this).siblings().removeClass("active");
$(this).addClass("active");
}
});
// 이미지 변경시
$(".li_check_img>li").click(function (e) {
e.stopPropagation();
$(this).siblings().find('img').each(function () {
filename = $(this).attr('src');
filename = filename.replace('_on', '');
$(this).attr('src', filename)
});
filename = $(this).find('img').attr('src');
filename = filename.replace('_on', '').replace('.png', '_on.png')
$(this).find('img').attr('src', filename)
});
// search_lately
// 최근검색 on,off 효과
$(".search_lately li").click(function (e) {
e.stopPropagation();
if (!$(this).hasClass("active")) {
$(".search_lately li.active").removeClass("active");
$(this).addClass("active");
}
});
// nutrition_time_ampm
// 상단시계 am&pm on,off 효과
$(".nutrition_time_ampm span").click(function (e) {
e.stopPropagation();
if (!$(this).hasClass("active")) {
$(".nutrition_time_ampm span.active").removeClass("active");
$(this).addClass("active");
}
});
// nutrition_camera 이미지 업로드
$('#append_src_img_file').on('change', function () {
ext = $(this).val().split('.').pop().toLowerCase(); //확장자
//배열에 추출한 확장자가 존재하는지 체크
if ($.inArray(ext, ['gif', 'png', 'jpg', 'jpeg']) == -1) {
resetFormElement($(this)); //폼 초기화
window.alert('이미지 파일이 아닙니다! (gif, png, jpg, jpeg 만 업로드 가능)');
} else {
file = $('#append_src_img_file').prop("files")[0];
blobURL = window.URL.createObjectURL(file);
$('#img_preview').attr('src', blobURL);
$('.img_preview').slideDown(); //업로드한 이미지 미리보기
$(this).slideUp(); //파일 양식 감춤
$("#layer_nutirition_tp").show();
}
});
// 분유, 유축수유 탭 토글 이벤트
$(".type_tab>li").click(function (e) {
e.stopPropagation();
if (!$(this).hasClass("current")) {
$(this).siblings().removeClass("current");
$(this).addClass("current");
}
});
/* 분유 또는 유축수유 선택 후 show, hide */
$(".milk_type ul li:first-child").click(function (e) {
$(".milk_powder").show();
$(".breastfeeding").hide();
console.log("first-child select");
});
$(".milk_type ul li:last-child").click(function (e) {
$(".breastfeeding").show();
$(".milk_powder").hide();
console.log("last-child select");
});
var swiper = new Swiper('.swiper-container', {
slidesPerView: 'auto',
slidesPerGroup: 1,
spaceBetween: 10,
loopFillGroupWithBlank: true,
pagination: {
loop: false,
el: '.swiper-pagination',
clickable: true,
}
});
</script>
</html>
Write Preview
Loading…
Cancel
Save