layui-plugin
/
ark.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>听宇网-听宇Teandy的方舟生存进化干货站</title>
    <link rel="stylesheet" href="./layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="./css/ark-index1.css" media="all">
    <style type="text/css">
		.ark-creature-block,.ark-creature-block-tran {
			width: 98%;height: 100%; height: 400px;
			position: relative;
			/* outline: 1px solid red; */
			margin: 0 0 20px 0;
			/* outline: 1px solid red; */
			/* border-right: 1px solid #009688; */
			border-radius: 5px;
			background-color: #FAFAFA;
		}

		.line{
			outline: 1px solid red;
		}

		.ark-creature-block-tran{
			height: 500px;
		}

		.ark-slider-status{
			margin-top:8px ;
		}
		.ark-slider-status-block{
			margin-top:8px ;
		}

		.ark-tran-item-block,.ark-tran-item-block-50{
			width: 100px;height: 100px;float:left;
			padding: 10px;
			cursor: pointer;
			border-radius: 5px;
			position: relative;
		}
		.ark-tran-item-block-50{
			width: 50px;height: 50px;
		}
		.ark-tran-item-block-font{
			position: absolute;
			    font-weight: bold;
			    color: #FF5722;
			    font-size: 40px;
		}


		.ark-tran-item-block:hover,.ark-tran-item-block-50:hover{
			background-color: #d2d2d2;
		}

		.ark-tran-item-block-img{
			width: 100%;
			height: 100%;
		}

		.ark-map-creature-item{
			margin-bottom: 5px;
			background-color: #1E9FFF;
			    color: white;
			    display: inline-block;
			    border-radius: 15px;
			    padding: 8px;
			    cursor: pointer;
		}

		.ark-map-creature-item:hover{
			outline: 2px solid #2F4056;
		}
    </style>
</head>
<body>

<ul class="layui-nav layui-bg-cyan">
    <div class="layui-row ark-width-framework">
        <li class="layui-nav-item"><a href="javascript:;"><img th:src="@{/favicon.ico}"></a></li>
        <li class="layui-nav-item"><a href="javascript:;">社区</a></li>
        <li class="layui-nav-item">
            <a href="javascript:;">关于听宇</a>
            <dl class="layui-nav-child">
                <dd><a href="">赞助榜</a></dd>
                <dd><a href="">听宇教学视频</a></dd>
                <dd><a href="">听宇的小游戏</a></dd>
            </dl>
        </li>
    </div>

</ul>

<div class="layui-row" style="width: 80%; margin: 20px auto;" >
	<div class="layui-col-xs12 layui-col-md12" style="margin: 0 0 20px 0;">
		<h1 style="font-weight: 400;font-size: 3.2em;">霸王龙(Rex)</h1>
	</div>
    <div class="layui-col-xs12 layui-col-md6" style="background-color: #FAFAFA;margin-bottom: 20px;" >
		<div  class="ark-creature-block">
			<blockquote class="layui-elem-quote"><h2>基础信息</h2></blockquote>
			<!-- 数据详情 -->
			<div class="layui-row"  >
				<div class="layui-col-xs12 layui-col-md12" style="margin-bottom: 20px;" >
					<div class="layui-row ark-slider-status-block">
						<div class="layui-col-xs3 layui-col-md3" style="font-weight: bold;text-align: center;">
							等级
						</div>
						<div class="layui-col-xs8 layui-col-md8" >
							<div id="slideTest0" class="ark-slider-status"></div>
						</div>
					</div>
				</div>
				<div class="layui-col-xs12 layui-col-md6" style="margin-top: 20px;">
							<div class="layui-row ark-slider-status-block">
								<div class="layui-col-xs3 layui-col-md3" style="font-weight: bold;text-align: center;">
									体力
								</div>
								<div class="layui-col-xs8 layui-col-md8" >
									<div class="layui-progress layui-progress-big" lay-showpercent="true">
									  <div class="layui-progress-bar layui-bg-green" lay-percent="1100"></div>
									</div>
								</div>

							</div>
							<div class="layui-row ark-slider-status-block" >
								<div class="layui-col-xs3 layui-col-md3" style="font-weight: bold;text-align: center;">
									耐力
								</div>
								<div class="layui-col-xs8 layui-col-md8" >
									<div class="layui-progress layui-progress-big" lay-showpercent="true">
									  <div class="layui-progress-bar layui-bg-green" lay-percent="420"></div>
									</div>
								</div>
							</div>
							<div class="layui-row ark-slider-status-block">
								<div class="layui-col-xs3 layui-col-md3" style="font-weight: bold;text-align: center;">
									氧气
								</div>
								<div class="layui-col-xs8 layui-col-md8" >
									<div class="layui-progress layui-progress-big" lay-showpercent="true">
									  <div class="layui-progress-bar layui-bg-green" lay-percent="150"></div>
									</div>
								</div>
							</div>
							<div class="layui-row ark-slider-status-block">
								<div class="layui-col-xs3 layui-col-md3" style="font-weight: bold;text-align: center;">
									食物
								</div>
								<div class="layui-col-xs8 layui-col-md8" >
									<div class="layui-progress layui-progress-big" lay-showpercent="true">
									  <div class="layui-progress-bar layui-bg-green" lay-percent="3000"></div>
									</div>
								</div>
							</div>
							<div class="layui-row ark-slider-status-block" >
								<div class="layui-col-xs3 layui-col-md3" style="font-weight: bold;text-align: center;">
									负重
								</div>
								<div class="layui-col-xs8 layui-col-md8" >
									<div class="layui-progress layui-progress-big" lay-showpercent="true">
									  <div class="layui-progress-bar layui-bg-green" lay-percent="500"></div>
									</div>
								</div>
							</div>
							<div class="layui-row ark-slider-status-block" >
								<div class="layui-col-xs3 layui-col-md3" style="font-weight: bold;text-align: center;">
									眩晕
								</div>
								<div class="layui-col-xs8 layui-col-md8" >
									<div class="layui-progress layui-progress-big" lay-showpercent="true">
									  <div class="layui-progress-bar layui-bg-green" lay-percent="1550"></div>
									</div>
								</div>
							</div>
				</div>
				<div class="layui-col-xs12 layui-col-md6" >
					<div id="creature-chart" style="height: 180px;margin-top: 10px;"></div>
				</div>
				<div class="layui-col-xs12 layui-col-md12" >
					<div style="width: 95%;margin: 20px auto;">
						<span class="layui-badge layui-bg-orange">永远的神</span>
						<span class="layui-badge layui-bg-orange">霸霸</span>
						<span class="layui-badge layui-bg-orange">大佬象征</span>
					</div>

				</div>
			</div>
		</div>
    </div>
    <div class="layui-col-xs12 layui-col-md6" >

		<div class="ark-creature-block" style="float: right">
			<blockquote class="layui-elem-quote"><h2>生物展示</h2></blockquote>
			<div class="layui-carousel" id="creature-carousel" >
			  <div carousel-item >
			    <div ><img  src="img/rex.png" /></div>
				<div ><img  src="img/rex.png" /></div>
			  </div>
			</div>
		</div>

    </div>

	<div class="layui-col-xs12 layui-col-md12" style="background-color: #FAFAFA;">

		<div class="ark-creature-block-tran">
			<blockquote class="layui-elem-quote"><h2>驯养</h2></blockquote>
			<div class="layui-row " style="width: 95%;margin: 0 auto;">
				<div class="layui-col-xs12 layui-col-md12" style="background-color: #eeeeee;position: relative;">
					<blockquote class="layui-elem-quote" style="margin-bottom: 0;"><h2>困兽笼材质推荐</h2></blockquote>
					<span style="color: #01AAED;position: absolute;right: 0;top: 20px;cursor: pointer;">如何建造困兽笼?</span>
					<div class="ark-tran-item-block" ><span style="position: absolute;" class="layui-badge">可破坏</span><img class="ark-tran-item-block-img" src="img/Thatch_Wall.png" /></div>
					<div class="ark-tran-item-block"><span style="position: absolute;" class="layui-badge">可破坏</span><img class="ark-tran-item-block-img" src="img/Wooden_Wall.png" /></div>
					<div class="ark-tran-item-block"><span style="position: absolute;" class="layui-badge layui-bg-green">不可破坏</span><img class="ark-tran-item-block-img" src="img/Adobe_Wall.png" /></div>
					<div class="ark-tran-item-block"><span style="position: absolute;" class="layui-badge layui-bg-green">不可破坏</span><img class="ark-tran-item-block-img" src="img/Stone_Wall.png" /></div>
					<div class="ark-tran-item-block" ><span style="position: absolute;" class="layui-badge layui-bg-green">不可破坏</span><img class="ark-tran-item-block-img" src="img/Metal_Wall.png" /></div>
					<div class="ark-tran-item-block"><span style="position: absolute;" class="layui-badge layui-bg-green">不可破坏</span><img class="ark-tran-item-block-img" src="img/Tek_Wall.png" /></div>
				</div>
				<div class="layui-col-xs12 layui-col-md12" style="background-color: #eeeeee;">
					<blockquote class="layui-elem-quote" style="margin-bottom: 0;"><h2>眩晕道具</h2></blockquote>
					<span style="color: #01AAED;position: absolute;right: 0;top: 20px;cursor: pointer;">眩晕小技巧</span>
					<div style="width: 100%;overflow-y:scroll;height : 120px;">
						<div class="ark-tran-item-block" ><span style="position: absolute;" class="layui-badge layui-bg-cyan">x6</span><img class="ark-tran-item-block-img" src="img/Shocking_Tranquilizer_Dart.png" /></div>
						<div class="ark-tran-item-block"><span style="position: absolute;"class="layui-badge layui-bg-cyan">x6</span><img class="ark-tran-item-block-img" src="img/Tranq_Arrow_Bow.png" /></div>
						<div class="ark-tran-item-block"><span style="position: absolute;"class="layui-badge layui-bg-cyan">x6</span><img class="ark-tran-item-block-img" src="img/Tranq_Arrow_Crossbow.png" /></div>
						<div class="ark-tran-item-block"><span style="position: absolute;"class="layui-badge layui-bg-cyan">x6</span><img class="ark-tran-item-block-img" src="img/Tranquilizer_Dart.png" /></div>
						<div class="ark-tran-item-block" ><span style="position: absolute;"class="layui-badge layui-bg-cyan">x6</span><img class="ark-tran-item-block-img" src="img/Shocking_Tranquilizer_Dart.png" /></div>
						<div class="ark-tran-item-block"><span style="position: absolute;"class="layui-badge layui-bg-cyan">x6</span><img class="ark-tran-item-block-img" src="img/Tranq_Arrow_Bow.png" /></div>
					</div>
				</div>
				<div class="layui-col-xs12 layui-col-md12" style="background-color: #eeeeee;">
					<blockquote class="layui-elem-quote" style="margin-bottom: 0;"><h2>驯服食物</h2></blockquote>
					<span style="color: #01AAED;position: absolute;right: 0;top: 20px;cursor: pointer;">新手如何高效获取饲料</span>
					<div class="ark-tran-item-block"><span style="position: absolute;"class="layui-badge layui-bg-cyan">x6</span><img class="ark-tran-item-block-img" src="img/Exceptional_Kibble.png" /></div>
					<div class="ark-tran-item-block"><span style="position: absolute;"class="layui-badge layui-bg-cyan">x6</span><img class="ark-tran-item-block-img" src="img/Raw_Mutton.png" /></div>
					<div class="ark-tran-item-block"><span style="position: absolute;"class="layui-badge layui-bg-cyan">x6</span><img class="ark-tran-item-block-img" src="img/Cooked_Lamb_Chop.png" /></div>
					<div class="ark-tran-item-block"><span style="position: absolute;"class="layui-badge layui-bg-cyan">x6</span><img class="ark-tran-item-block-img" src="img/Raw_Prime_Meat.png" /></div>
				</div>
				<div class="layui-col-xs12 layui-col-md12" style="background-color: #eeeeee;">
					<blockquote class="layui-elem-quote" style="margin-bottom: 0;"><h2>驯服时长</h2></blockquote>
					<span style="color: #01AAED;position: absolute;right: 0;top: 20px;cursor: pointer;">什么是有效驯服度?</span>
					<div class="ark-tran-item-block"><span style="position: absolute;"class="layui-badge layui-bg-cyan">4:32</span></div>
					<div class="ark-tran-item-block"><span style="position: absolute;"class="layui-badge layui-bg-cyan">4:32</span></div>
					<div class="ark-tran-item-block"><span style="position: absolute;"class="layui-badge layui-bg-cyan">4:32</span></div>
				</div>
			</div>

		</div>

	</div>
	<div class="layui-col-xs12 layui-col-md4" style="margin-top: 20px;">

		<div class="ark-creature-block" style="margin-bottom: 0;position: relative;">
			<blockquote class="layui-elem-quote"><h2>鞍</h2></blockquote>
			<span style="color: #01AAED;position: absolute;right: 5px;top: 20px;cursor: pointer;">如何提升护甲值?</span>
			<div class="layui-row" style="width: 95%; margin: 10px auto;" >
				<div class="layui-col-xs12 layui-col-md12" >
					<div class="layui-btn-group">
					 <button type="button" class="layui-btn layui-btn-sm" lay-active="saddleE">原始鞍</button>
					  <button type="button" class="layui-btn layui-btn-sm" lay-active="teksaddleE"><i class="layui-icon layui-icon-diamond"></i> 泰克鞍</button>
					  <button type="button" class="layui-btn layui-btn-sm layui-disabled" disabled="disabled"><i class="layui-icon layui-icon-diamond"></i>该生物无泰克鞍</button>
					  </div>
				</div>
				<div class="layui-col-xs12 layui-col-md12" id="saddle">
					<div class="ark-tran-item-block-50"><span style="position: absolute;"class="layui-badge layui-bg-cyan">x380</span><img class="ark-tran-item-block-img" src="img/Hide.png" /></div>
					<div class="ark-tran-item-block-50"><span style="position: absolute;"class="layui-badge layui-bg-cyan">x200</span><img class="ark-tran-item-block-img" src="img/Fiber.png" /></div>
					<div class="ark-tran-item-block-50" ><span style="position: absolute;"class="layui-badge layui-bg-cyan">x50</span><img class="ark-tran-item-block-img" src="img/Metal_Ingot.png" /></div>
				</div>
				<div class="layui-col-xs12 layui-col-md12" id="teksaddle" style="display: none;">
					<div class="ark-tran-item-block-50"><span style="position: absolute;"class="layui-badge layui-bg-cyan">x350</span><img class="ark-tran-item-block-img" src="img/Polymer.png" /></div>
					<div class="ark-tran-item-block-50"><span style="position: absolute;"class="layui-badge layui-bg-cyan">x1800</span><img class="ark-tran-item-block-img" src="img/Metal_Ingot.png" /></div>
					<div class="ark-tran-item-block-50" ><span style="position: absolute;"class="layui-badge layui-bg-cyan">x250</span><img class="ark-tran-item-block-img" src="img/Crystal.png" /></div>
					<div class="ark-tran-item-block-50"><span style="position: absolute;"class="layui-badge layui-bg-cyan">x40</span><img class="ark-tran-item-block-img" src="img/Element.png" /></div>
					<div class="ark-tran-item-block-50"><span style="position: absolute;"class="layui-badge layui-bg-cyan">x100</span><img class="ark-tran-item-block-img" src="img/Black_Pearl.png" /></div>
				</div>
			</div>
		</div>

	</div>
	<div class="layui-col-xs12 layui-col-md4" style="margin-top: 20px;">

		<div class="ark-creature-block" style="margin-bottom: 0;position: relative;">
			<blockquote class="layui-elem-quote"><h2>繁殖</h2></blockquote>
			<span style="color: #01AAED;position: absolute;right: 5px;top: 20px;cursor: pointer;">繁育小课堂</span>
			<div class="layui-row " style="width: 95%;margin: 0 auto;">
				<div class="layui-col-xs6 layui-col-md6">
					<ul class="layui-timeline">
					  <li class="layui-timeline-item">
					    <i class="layui-icon layui-timeline-axis"></i>
					    <div class="layui-timeline-content layui-text">
					      <div class="layui-timeline-title">3天 20小时 30分钟<br/>总孵化时长</div>
					    </div>
					  </li>
					  <li class="layui-timeline-item">
					    <i class="layui-icon layui-timeline-axis"></i>
					    <div class="layui-timeline-content layui-text">
					      <div class="layui-timeline-title">5小时</br>破壳</div>
					    </div>
					  </li>
					  <li class="layui-timeline-item">
					    <i class="layui-icon layui-timeline-axis"></i>
					    <div class="layui-timeline-content layui-text">
					      <div class="layui-timeline-title">9小时 15分钟</br>婴儿</div>
					    </div>
					  </li>
					  <li class="layui-timeline-item">
					    <i class="layui-icon layui-timeline-axis"></i>
					    <div class="layui-timeline-content layui-text">
					      <div class="layui-timeline-title">1天 13小时</br>少年</div>
					    </div>
					  </li>
					  <li class="layui-timeline-item">
					    <i class="layui-icon  layui-timeline-axis"></i>
					    <div class="layui-timeline-content layui-text">
					      <div class="layui-timeline-title">1天 22小时 15分钟</br>青年</div>
					    </div>
					  </li>
					</ul>
				</div>
				<div></div>
				<div class="layui-col-xs6 layui-col-md6" >
					<div style="    text-align: right;font-weight: bold;font-size: 16px;">32 – 34°C / <br/>90 – 93°</div>
					<img src="img/Rex_Egg.png" style="width: 128px;height: 128px;" />
				</div>
			</div>
		</div>

	</div>
	<div class="layui-col-xs12 layui-col-md4" style="margin-top: 20px;" >

		<div class="ark-creature-block">
			<blockquote class="layui-elem-quote"><h2>地图分布</h2></blockquote>
			<div class="layui-row " style="width: 95%;margin: 0 auto;">
				<div class="layui-col-xs12 layui-col-md12">
					<div class="ark-map-creature-item">孤岛(isLand)</div>
					<div class="ark-map-creature-item">水晶岛(isLand)</div>
					<div class="ark-map-creature-item">焦土(isLand)</div>
					<div class="ark-map-creature-item">瓦尔盖罗(isLand)</div>
				</div>
			</div>
		</div>

	</div>


</div>

<div class="ark-bottom">
	    <div class="layui-row ark-width-framework">
	        <div class="layui-col-xs12 layui-col-md4">
	            <div class="ark-bottom-ext-link">
	                <span class="ark-bottom-ext-link-tip">常用外链网站</span>
	                <br/>
	                <span class="layui-breadcrumb">
					    <a href="javascript:;">Dododex</a>
					    <a href="javascript:;">官方百科</a>
						<a href="javascript:;">孤岛游侠</a>
						<a href="javascript:;">搜服网站</a>
						<a href="javascript:;">更多链接>></a>
	                    <!-- <a><cite>导航元素</cite></a> -->
					  </span>
	            </div>

	        </div>
	        <div class="layui-col-xs12 layui-col-md4">
	            <div class="ark-bottom-ext-link">
	                <span class="ark-bottom-ext-link-tip">鼓励赞助合作联络</span>
	                <br/>
	                <span class="layui-breadcrumb">
						  <a href="">鼓励赞助</a>
						  <a href="index.html">合作洽谈</a>
						  <a href="">建议反馈</a>
						</span>
	            </div>

	        </div>
	        <div class="layui-col-xs12 layui-col-md4">
	            <div class="ark-bottom-ext-link">
	                <span class="ark-bottom-ext-link-tip">听宇的方舟交流群</span>
	                <br/>
	                <span class="layui-breadcrumb">
						  <a href="javascript:;">方舟交流天岚群：1077799087</a>
						  <a href="javascript:;">方舟创游建筑群：945558411</a>
	                    <!-- <a><cite>导航元素</cite></a> -->
						</span>
	            </div>
	        </div>
	        <div class="layui-col-xs12 layui-col-md12">
	            <div class="ark-bottom-copyright">
	                <span>Copyright ? 2019-2021.听宇网 All rights reserved. 鲁ICP备19059540号 站长统计</span>
	            </div>
	        </div>
	    </div>

	</div>

</body>
<script src="./layui/layui.js"></script>
<script src="js/echarts.min.js"></script>
<script type="text/javascript">
	// creature-chart
	var chartDom = document.getElementById('creature-chart');

	var option;

	option = {
	  color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'],
	  // title: {
	  //   text: 'Customized Radar Chart'
	  // },
	  legend: {},
	  radar: [
	    {
	      indicator: [
	        { text: '体力' },
	        { text: '耐力' },
	        { text: '氧气' },
	        { text: '食物' },
	        { text: '负重' },
			{ text: '眩晕' }
	      ],
	      center: ['50%', '50%'],
	      radius: 60,
	      startAngle: 90,
	      splitNumber: 4,
	      shape: 'circle',
	      axisName: {
	        formatter: '【{value}】',
	        color: '#428BD4'
	      },
	      splitArea: {
	        areaStyle: {
	          color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
	          shadowColor: 'rgba(0, 0, 0, 0.2)',
	          shadowBlur: 10
	        }
	      },
	      axisLine: {
	        lineStyle: {
	          color: 'rgba(211, 253, 250, 0.8)'
	        }
	      },
	      splitLine: {
	        lineStyle: {
	          color: 'rgba(211, 253, 250, 0.8)'
	        }
	      }
	    },

	  ],
	  series: [
	    {
	      type: 'radar',
	      emphasis: {
	        lineStyle: {
	          width: 4
	        }
	      },
	      data: [
	        {
	          value: [100, 8, 0.4, -80, 2000],
	          // name: 'Data A'
	        },
	        {
	          value: [60, 5, 0.3, -100, 1500],
	          // name: 'Data B',
	          areaStyle: {
	            color: 'rgba(255, 228, 52, 0.6)'
	          }
	        }
	      ]
	    },

	  ]
	};
	var myChart = echarts.init(chartDom);
	myChart.setOption(option);
</script>
<script>
layui.use(['element','slider','carousel','util'], function(){
  var $ = layui.$
  ,element = layui.element,slider = layui.slider,carousel = layui.carousel,
  util  = layui.util,
  saddle = $("#saddle"),teksaddle = $("#teksaddle");
  slider.render({
      elem: '#slideTest0',max:150,min:1,input:true
    });

	util.event('lay-active',{
		saddleE:function(e){saddle.show();teksaddle.hide();},
		teksaddleE:function(e){teksaddle.show();saddle.hide();}
	});

  carousel.render({
      elem: '#creature-carousel'
      ,width: '100%' ,//设置容器宽度
	  height:'345px'
      ,arrow: 'always' //始终显示箭头
      //,anim: 'updown' //切换动画方式
    });
});
</script>
</html>