You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
464 lines
18 KiB
464 lines
18 KiB
<!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, viewport-fit=cover" />
|
|
<title>아이키 매니저::성장 TALK 상세보기</title>
|
|
<link rel="shortcut icon" href="../../img/favicon.ico">
|
|
<link rel="stylesheet" href="../../css/style.css">
|
|
<link rel="stylesheet" href="../../css/swiper.min.css">
|
|
<script type="text/javascript" src="../../js/jquery-3.3.1.min.js"></script>
|
|
<script src="../../js/swiper.min.js"></script>
|
|
<script src="../../js/jquery_popupoverlay.js"></script>
|
|
<script src="../../js/design.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- wrap -->
|
|
<div class="wrap">
|
|
|
|
<!-- header_sub -->
|
|
<header class="header_wrapper">
|
|
<a href="javascript:back.return_url()" class="side_Lbtn hidden pre_btn">이전으로</a>
|
|
<h1 class="header_title">커뮤니티</h1>
|
|
<div class="side_Rbtn">
|
|
</div>
|
|
</header>
|
|
<!-- //header_sub -->
|
|
|
|
<!-- content -->
|
|
<div class="community_view01">
|
|
<!-- 상단 콘텐츠 -->
|
|
<div class="cont_header">
|
|
<!-- 태그, 좋아요 댓글 -->
|
|
<div class="between cont_space">
|
|
<div class="tag_cont">
|
|
<span id="yellow">자유글</span>
|
|
<span id="blue">기록</span>
|
|
<span id="green">이유식</span>
|
|
<span id="red">칼럼</span>
|
|
</div>
|
|
<div class="count_cont">
|
|
<div>
|
|
<div class="like_icon"></div>
|
|
<span>0</span>
|
|
</div>
|
|
<div>
|
|
<div class="comment_icon"></div>
|
|
<span>0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 제목, 옵션 -->
|
|
<div class="between cont_space">
|
|
<h2 class="title">시판 이유식 추천 부탁드려요</h2>
|
|
<a href="#" class="option" id="option1_btn"></a>
|
|
</div>
|
|
|
|
<!-- 작성자 프로필 -->
|
|
<div class="profile_cont">
|
|
<!-- 프로필 사진 -->
|
|
<div class="profile_img">
|
|
<img src="../../img/community/community_writer_img.png" alt="프로필 사진">
|
|
</div>
|
|
<div class="profile_info">
|
|
<!-- 닉네임 -->
|
|
<p class="tit">닉네임</p>
|
|
<!-- 작성시각 . 조회수 -->
|
|
<p>00:00 · 조회 000</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- //상단 콘텐츠 -->
|
|
|
|
<!-- 본문 -->
|
|
<div>
|
|
<!-- community_img -->
|
|
<div class="community_img">
|
|
<!-- swiper_wrap -->
|
|
<div class="swiper_wrap">
|
|
<div class="swiper-container">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide img_box" onclick="layer_open('#detail_img_pop');">
|
|
<img src="../../img/community/community_ex_img.png">
|
|
</div>
|
|
<div class="swiper-slide img_box" onclick="layer_open('#detail_img_pop');">
|
|
<img src="../../img/community/community_ex_img.png">
|
|
</div>
|
|
</div>
|
|
<div class="swiper-pagination"></div>
|
|
</div>
|
|
</div>
|
|
<!-- //swiper_wrap -->
|
|
<p class="cont_txt">영양성분을 함유하는 물질을 식품이라고 하며, 천연식품을 그대로 먹기도 하지만 조리, 가공하여 식용으로 이용하는 경우가 많아 이들도 넓은 뜻의 식품에 포함시킨다. 식품은 여러 가지 기준에 따라 분류할 수 있다. 동식물별로 크게 나눌 수도 있고, 산업별(농산·축산·임산·수산)로 나눌 수도 있으며, 영양성분별로 분류할 수도 있다.</p>
|
|
</div>
|
|
<!-- //community_img -->
|
|
</div>
|
|
|
|
<!-- 좋아요, 공유 버튼 -->
|
|
<div class="like_shared_cont">
|
|
<div class="cont">
|
|
<!-- 좋아요 -->
|
|
<button type="button" id="" name="" class="c_btn like_btn">
|
|
<span class="hidden">아이콘</span>
|
|
</button>
|
|
|
|
<!-- 공유 -->
|
|
<button type="button" id="" name="" class="c_btn shared_btn">
|
|
<span class="hidden">아이콘</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 댓글 -->
|
|
<div class="comment_header">
|
|
<p>댓글</p>
|
|
<button type="button" id="" name="" class="refresh">
|
|
<span class="hidden">아이콘</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- community_comment -->
|
|
<div class="community_comment">
|
|
<!-- 댓글 -->
|
|
<div class="comment">
|
|
<!-- profile & option box -->
|
|
<div class="comment_profile">
|
|
<!-- profile -->
|
|
<div class="profile_cont">
|
|
<div class="profile_img">
|
|
<img src="../../img/community/person-fill.svg" alt="기본 프로필 사진">
|
|
</div>
|
|
<div class="profile_info">
|
|
<p class="tit">닉네임</p>
|
|
<div>
|
|
<p>00:00</p>
|
|
<p> · </p>
|
|
<button class="btn_reply">답글쓰기</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- option -->
|
|
<div class="option2_btn">
|
|
<div href="#" class="option"></div>
|
|
</div>
|
|
</div>
|
|
<div class="comment_text">
|
|
저는 A사 이유식 괜찮은 것 같더라구요
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 댓글 -->
|
|
<div class="comment">
|
|
<!-- profile & option box -->
|
|
<div class="comment_profile">
|
|
<!-- profile -->
|
|
<div class="profile_cont">
|
|
<div class="profile_img">
|
|
<img src="../../img/community/community_writer_img.png" alt="프로필 사진">
|
|
</div>
|
|
<div class="profile_info">
|
|
<p class="tit">닉네임</p>
|
|
<div>
|
|
<p>00:00</p>
|
|
<p> · </p>
|
|
<button class="btn_reply">답글쓰기</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- option -->
|
|
<div class="option2_btn">
|
|
<div href="#" class="option" ></div>
|
|
</div>
|
|
</div>
|
|
<div class="comment_text">
|
|
저는 A사 이유식 괜찮은 것 같더라구요
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 대댓글 - reply class 추가 -->
|
|
<div class="comment reply">
|
|
<!-- profile & option box -->
|
|
<div class="comment_profile">
|
|
<!-- profile -->
|
|
<div class="profile_cont">
|
|
<div class="profile_img">
|
|
<img src="../../img/community/community_writer_img.png" alt="프로필 사진">
|
|
</div>
|
|
<div class="profile_info">
|
|
<p class="tit">닉네임</p>
|
|
<div>
|
|
<p>00:00</p>
|
|
<p> · </p>
|
|
<button class="btn_reply">답글쓰기</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- option -->
|
|
<div class="option2_btn">
|
|
<div href="#" class="option"></div>
|
|
</div>
|
|
</div>
|
|
<div class="comment_text">
|
|
<div class="mention">${item['mention']!}</div>저는 A사 이유식 괜찮은 것 같더라구요
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 대댓글 - reply class 추가 -->
|
|
<div class="comment reply">
|
|
<!-- profile & option box -->
|
|
<div class="comment_profile">
|
|
<!-- profile -->
|
|
<div class="profile_cont">
|
|
<div class="profile_img">
|
|
<img src="../../img/community/community_writer_img.png" alt="프로필 사진">
|
|
</div>
|
|
<div class="profile_info">
|
|
<p class="tit">닉네임</p>
|
|
<div>
|
|
<p>00:00</p>
|
|
<p> · </p>
|
|
<button class="btn_reply">답글쓰기</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- option -->
|
|
<div class="option2_btn">
|
|
<div href="#" class="option"></div>
|
|
</div>
|
|
</div>
|
|
<div class="comment_text">
|
|
저는 A사 이유식 괜찮은 것 같더라구요
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 댓글 -->
|
|
<div class="comment">
|
|
<!-- profile & option box -->
|
|
<div class="comment_profile">
|
|
<!-- profile -->
|
|
<div class="profile_cont">
|
|
<div class="profile_img">
|
|
<img src="../../img/community/community_writer_img.png" alt="프로필 사진">
|
|
</div>
|
|
<div class="profile_info">
|
|
<p class="tit">닉네임</p>
|
|
<div>
|
|
<p>00:00</p>
|
|
<p> · </p>
|
|
<button class="btn_reply">답글쓰기</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- option -->
|
|
<div class="option2_btn">
|
|
<div href="#" class="option"></div>
|
|
</div>
|
|
</div>
|
|
<div class="comment_text">
|
|
저는 A사 이유식 괜찮은 것 같더라구요
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 대댓글 - reply class 추가 -->
|
|
<div class="comment reply">
|
|
<!-- profile & option box -->
|
|
<div class="comment_profile">
|
|
<!-- profile -->
|
|
<div class="profile_cont">
|
|
<div class="profile_img">
|
|
<img src="../../img/community/person-fill.svg" alt="기본 프로필 사진">
|
|
</div>
|
|
<div class="profile_info">
|
|
<p class="tit">닉네임</p>
|
|
<div>
|
|
<p>00:00</p>
|
|
<p> · </p>
|
|
<button class="btn_reply">답글쓰기</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- option -->
|
|
<div class="option2_btn">
|
|
<div href="#" class="option"></div>
|
|
</div>
|
|
</div>
|
|
<div class="comment_text">
|
|
저는 A사 이유식 괜찮은 것 같더라구요
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- //community_comment -->
|
|
<div>
|
|
|
|
</div>
|
|
</div>
|
|
<!-- //content -->
|
|
|
|
</div>
|
|
<!-- //wrap -->
|
|
|
|
<div class="comment_input_cont">
|
|
<div class="reply_cont">
|
|
<div class="reply_to">
|
|
닉네임 님에게 답글쓰는 중
|
|
</div>
|
|
<button class="reply_del">
|
|
<img src="../../img/close_ico.png" alt="취소 버튼">
|
|
</button>
|
|
</div>
|
|
<div class="input">
|
|
<textarea placeholder="댓글 남기기" onkeydown="resize(this)" onkeyup="resize(this)"></textarea>
|
|
</div>
|
|
<div class="submit">
|
|
등록
|
|
</div>
|
|
</div>
|
|
|
|
<!-- detail_img_pop, img_popup_wrap팝업 -->
|
|
<div id="detail_img_pop" class="layer-wrap img_popup_wrap">
|
|
<div class="bg"></div>
|
|
<div class="pop-layer">
|
|
<img src="../../img/community/community_ex_img.png" class="img_popup">
|
|
<button type="button" id="" name="" class="c_download_img_btn">이미지 저장</button>
|
|
</div>
|
|
</div>
|
|
<!-- //detail_img_pop, img_popup_wrap 팝업 -->
|
|
|
|
<!-- modal-wrapper -->
|
|
<div class="community_option" id="option1">
|
|
<div class="content">
|
|
<!-- 옵션 모달 -->
|
|
<ul>
|
|
<!-- <li>
|
|
<a>
|
|
<div class="copy_icon"></div>
|
|
복사하기
|
|
</a>
|
|
</li> -->
|
|
<li>
|
|
<a>
|
|
<div class="edit_icon"></div>
|
|
수정하기
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a>
|
|
<div class="delect_icon"></div>
|
|
삭제하기
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="modal_layer"></div>
|
|
</div>
|
|
<!-- //modal-wrapper -->
|
|
|
|
<!-- modal-wrapper -->
|
|
<div class="community_option" id="option2">
|
|
<div class="content">
|
|
<!-- 옵션 모달 -->
|
|
<ul>
|
|
<li>
|
|
<a>
|
|
<div class="copy_icon"></div>
|
|
복사하기
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a>
|
|
<div class="edit_icon"></div>
|
|
수정하기
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a>
|
|
<div class="delect_icon"></div>
|
|
삭제하기
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="modal_layer"></div>
|
|
</div>
|
|
<!-- //modal-wrapper -->
|
|
|
|
<!-- modal-wrapper -->
|
|
<div class="community_option" id="shared">
|
|
<div class="content">
|
|
<!-- 공유 모달 -->
|
|
<div class="shared">
|
|
<div class="item">
|
|
<a>
|
|
<div class="img"><img src="../../img/Icon_Share_Insta.png"></div>
|
|
인스타그램
|
|
</a>
|
|
</div>
|
|
<div class="item">
|
|
<a>
|
|
<div class="img"><img src="../../img/Icon_Share_Kakao.png"></div>
|
|
카카오톡
|
|
</a>
|
|
</div>
|
|
<div class="item">
|
|
<a>
|
|
<div class="img"><img src="../../img/Icon_Share_Clip.png"></div>
|
|
URL 복사
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal_layer"></div>
|
|
</div>
|
|
<!-- //modal-wrapper -->
|
|
|
|
<script>
|
|
$(function() {
|
|
$(".community_header ul li a").on("click", function() {
|
|
$(this).addClass("active")
|
|
.parents(".community_header ul li").siblings().find("a").removeClass("active")
|
|
});
|
|
$(".like_btn").on("click", function() {
|
|
$(this).toggleClass("active");
|
|
});
|
|
$("#option1_btn").on("click", function() {
|
|
$("#option1").toggleClass("open");
|
|
})
|
|
$(".option2_btn").on("click", function() {
|
|
$("#option2").toggleClass("open");
|
|
})
|
|
$(".shared_btn").on("click", function() {
|
|
$("#shared").toggleClass("open");
|
|
})
|
|
$(".modal_layer").on("click", function() {
|
|
$(".community_option").removeClass("open");
|
|
})
|
|
|
|
$(".btn_reply").on("click", function() {
|
|
$(".reply_cont").addClass("active");
|
|
})
|
|
$(".reply_del").on("click", function() {
|
|
$(".reply_cont").removeClass("active");
|
|
})
|
|
});
|
|
var swiper = new Swiper('.swiper-container', {
|
|
spaceBetween: 20,
|
|
pagination: {
|
|
loop: true,
|
|
el: '.swiper-pagination',
|
|
},
|
|
});
|
|
|
|
function resize(obj) {
|
|
obj.style.height = "1px";
|
|
obj.style.height = (6+obj.scrollHeight)+"px";
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |