<!DOCTYPE html>
|
<html>
|
|
<head>
|
<meta charset="utf-8" />
|
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
|
<title>新手攻略</title>
|
<!--css-->
|
<link rel="stylesheet" type="text/css" href="css/DOUI.min.css"/>
|
<style type="text/css">
|
/*卡片外框*/
|
.kadan { width: 90%; margin-top: 1rem; background-color: white; overflow: hidden; }
|
/*图片*/
|
.kaimgsize { width: 100%; height: 40vw; background-color: burlywood; }
|
/*文字说明*/
|
.katextwai { width: 94%; height: 2.5rem; padding: 0 3%; }
|
/*回到顶部*/
|
.backtop { width: 3rem; height: 3rem; position: fixed; right: 1rem; bottom: 1rem; border-radius: 50%; opacity: 0.7; }
|
.backtopimg { width: 3rem; height: 3rem; border-radius: 50%; }
|
</style>
|
<!--js-->
|
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
|
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
|
<script src="js/DOUI.min.js" type="text/javascript" charset="utf-8"></script>
|
</head>
|
|
<body>
|
<div id="allwai" class="allwai font3">
|
|
<div style="width: 100%; padding-bottom: 2rem;" class="fboxCol Ycenter">
|
|
<!--卡片-->
|
<div v-for="(item, index) in kapian" class="kadan" v-on:click="click_kapian(item.a_href)">
|
<!--图片-->
|
<div class="kaimgsize">
|
<image class="kaimgsize" v-bind:src="item.src"></image>
|
</div>
|
<!--文字说明区域-->
|
<div class="katextwai fboxRow Ycenter">
|
<div class="font-ell1">{{item.title}}</div>
|
</div>
|
</div>
|
|
</div>
|
|
<!--回到顶部-->
|
<div v-if="show_back" class="backtop" v-on:click="Click_backtop">
|
<img class="backtopimg" src="img/search_totop.png"/>
|
</div>
|
|
</div>
|
</body>
|
|
</html>
|
|
|
<script type="text/javascript">
|
|
var allwai = new Vue({
|
|
el: "#allwai",
|
|
data: {
|
|
//是否显示回到顶部小火箭
|
show_back: false,
|
//教程卡片组
|
kapian: [],
|
},
|
|
created: function () { dataGet(); },
|
|
methods: {
|
|
// 卡片点击
|
click_kapian: function (ev) { window.location.href = ev; },
|
|
// 回到顶部
|
Click_backtop: function () { doui.scrollBackTop("#allwai",300); },
|
|
},
|
|
});
|
|
|
// 滚动
|
$("#allwai").scroll(function()
|
{
|
var topjuli = $("#allwai").scrollTop();
|
if (topjuli > 100) { allwai.show_back = true; }
|
else { allwai.show_back = false; }
|
});
|
|
|
// ====================================================== 请求数据
|
function dataGet ()
|
{
|
var myurl = "../../../api/h5/v1/strategy/getStrategyPictureList";
|
var mydata = doui.AjaxData({});
|
doui.AjaxGet(myurl, mydata, function(res)
|
{
|
if (res.code != 0) { doui.showToast(res.msg); }
|
else
|
{
|
console.log(res);
|
var mo = new Array();
|
for(var i = 0; i < res.data.length; i++)
|
{
|
// 构建节点
|
var jiedian = {
|
"title": res.data[i].title,
|
"src": res.data[i].postPicture,
|
"a_href": "../index.html?id=" + res.data[i].id
|
};
|
mo.push(jiedian);
|
}
|
// 赋值
|
allwai.kapian = mo;
|
}
|
});
|
}
|
|
</script>
|
