生肖查询框

application/controllers/information.php

@@ -1299,6 +1299,12 @@ class Information extends CI_Controller
         /** 替换H1加面包屑 */
         $ic_content = preg_replace('/<h1>(.*)<\/h1>/i', $crumb . "\r\n" . '<H1>$1</H1>', $ic_content, 1);
 
+        /**替换zodiac标签 */
+        if (strpos($ic_content, '<!--@ZODIAC-CALC@-->') !== false){
+            $zodiacCalc = $this->load->view('mobile_first/' . $this->config->item('site_code').'-zodiac-calc',false,true);
+            $ic_content =  str_replace('<!--@ZODIAC-CALC@-->', $zodiacCalc, $ic_content);
+        }
+
         //图片加延迟
         $ic_content = $this->html_optimize_lib->set_lazy_loader($ic_content, 'https://data.chinatravel.com/images/mobile-first/grey.gif');
 

application/views/mobile_first/chinatravel-zodiac-calc.php

@@ -0,0 +1,23 @@
+<style type="text/css" >.zodiac-box{ background: #f2f2f2; border-radius: 6px; padding: 40px 40px 5px; margin-top: 80px; margin-bottom: 50px;}.flex-col-2x,.flex-col-1x{margin-right: 20px; display: flex; flex-flow: column; position: relative; margin-bottom: 30px;}.flex-col-2x{width: calc((100% - 20px * 3) / 1.6); }.flex-col-1x{width: calc((100% - 20px * 3) / 2.5); margin-right: 0;}.zodiac-box .form-control { border: solid 2px #df6536;}.btn-zodiacsearch { border-radius: 6px; padding-top:0.98rem; padding-bottom:0.98rem; text-align: center;}.zodiac-search { border-top: solid 1px #ccc; padding-top: 30px; }@media (max-width: 768px) { .flex-col-2x,.flex-col-1x { width: 100%;  margin-bottom:20px; margin-right: 0; }.flex-col-1x  {margin-bottom: 30px;}}</style>
+<div class="zodiac-box" id="zodiac-box">
+<div class="flex-row">
+<div class="flex-col-2x"><input class="form-control calendar3 hasDatepicker" id="birth_Date" name="birth_Date" placeholder="Date of Birth" readonly="readonly" type="text" value="" /></div>
+
+<div class="flex-col-1x"><a aria-label="Find Your Zodiac Sign" class="btn btn-orange btn-zodiacsearch" href="javascript:;" id="search_submit" name="search_submit">Find Your Zodiac Sign</a></div>
+</div>
+
+<div class="zodiac-search" style="display: none;" id="zodiac-search">
+<p class="font24">Your Chinese zodiac sign is the <strong class="orange" id="sign1">Ox</strong>.</p>
+
+<p>People born in the Year of the <sapn id="sign2">Ox</sapn> are <strong id="character">honest, patient, and reliable</strong>.</p>
+
+<ul class="common">
+	<li><strong>Five Elements:</strong> <span id="WuXing">Earth</span></li>
+	<li><strong>Lucky Numbers:</strong> <span id="Luky-Numbers">1, 4, 9</span></li>
+	<li><strong>Lucky Colors:</strong> <span id="Luky-Colors">green, white</span></li>
+</ul>
+</div>
+</div>
+<link href="https://data.chinatravel.com/css/newcss3/flatpickr.css" rel="stylesheet" type="text/css" />
+<script src="https://data.chinatravel.com/js/mobile-first/zepto.min.js"></script>
+<script src="https://data.chinatravel.com/js/mobile-first/zodiac/zodiac-calc.js"></script>