<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"> <title>慈界医养</title> <script src="../../assets/js/fontsize.js"></script> <link rel="stylesheet" href="../../assets/css/weui.min.css"> <link rel="stylesheet" href="../../assets/css/api.css"/> <link rel="stylesheet" href="../../assets/css/swiper-3.4.2.min.css"> <!--<link rel="stylesheet" href="http://at.alicdn.com/t/font_641470_jg64l6ijsg4lsor.css">--> <link rel="stylesheet" href="../../assets/css/my_f.css"/> <link rel="stylesheet" href="../../assets/css/index.css"> <link rel="stylesheet" href="../../assets/icon/iconfont.css"> <style> header { width: 100%; height: auto; font-size: 20px; /*background-color: #dbb25f;*/ } .headers { background-color: #dbb25f; } .strict_box { display: flex; align-items: center; justify-content: space-around; font-size: 11px; color: #565656; padding: 0.26rem 0; background-color: #fff; } .strict_box .iconfont { color: #D8B25F; font-size: 15px; margin-right: 0.1rem; } .strict_box1 { display: flex; align-items: center; justify-content: space-between; font-size: 11px; padding: 0.21rem 0.37rem; background-color: #fff; } .strict_box1_left { padding: 0.14rem 0.3rem; box-shadow: 0 0 3px #ccc; color: #686868; border-radius: 0.16rem; } .strict_box1_right { padding: 0.14rem 0.3rem; color: #FBA500; box-shadow: 0 0 3px rgba(251, 165, 0, 0.5); border-radius: 0.16rem; } .progress_box { margin: 0.1rem 0.26rem 0 0.26rem; background-color: #f5f5f5; } .progress { height: 0.08rem; background-color: #D8B25F; width: 0; } .target_box { display: flex; align-items: center; justify-content: space-between; padding: 0.46rem 0; box-shadow: 0 -3px 4px 0 #E4E4E4 inset; background-color: #fff; } .target_item { font-size: 17px; color: #060606; /*font-weight: 600;*/ text-align: center; flex: 1; border-right: 1px solid #d9d9d9; padding: 0.2rem 0 0.1rem 0; } .target_item:last-child { border: 0; } .target_item_bottom { font-size: 12px; color: #565656; } .strict_title { display: flex; align-items: center; justify-content: space-between; font-size: 17px; color: #000; padding: 0.35rem 0; background-color: #fff; } .strict_title span { flex: 1; text-align: center; } .strict_title .strict_title_item { border-right: 2px solid #D8B25F; } .strict_title .strict_title_item_active { color: #D8B25F; } .strict_content_title { padding: 0.32rem 0; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #060606; background-color: #fff; } .strict_content_title .quan { padding: 0.1rem 0; border-bottom: 1px solid #333; } .strict_box_img { display: flex; align-items: center; justify-content: center; } .strict_box_img img { width: 100%; } .strict_btn { display: flex; align-items: center; justify-content: space-between; background: #fff; padding: 0 0 0 0.57rem; /*margin: 0.08rem 0 0 0;*/ position: fixed; width: 100%; left: 0; bottom: 1.31rem; z-index: 2; border-bottom: 1px solid #f2f2f2; } .strict_btn_price { font-size: 18px; color: #E87139; flex: 1; } .strict_btn_right { flex: 1; display: flex; align-items: center; font-size: 10px; color: #333; } .goPay { padding: 0.28rem 0; background-color: #D8B25F; font-size: 15px; color: #fff; flex: 1; text-align: center; } .strict_btn_right_item { padding: 0 0.32rem; display: flex; align-items: center; flex-direction: column; border-left: 1px solid #E4E4E4 } .rmb { font-size: 13px; } .index_on { background-color: #fff; border-bottom: 1px solid #f2f2f2; } .index_on .iconfont { color: #D8B25F; } /*flex布局*/ [v-cloak]{ display: none; } </style> </head> <body> <div id="app" v-cloak> <div id="container"></div> <header :class="index===0?'headers':''"> <div class="index1" v-else-if="index==1"> <div class="index1_item index_on"> <!--<div class="index1_item index_on">--> <div></div> <div class="iconfont icon-fenxiang-tianchong"></div> </div> </div> </header> <div class="warp" v-cloak> <div class="index1"> <img :src="banner" alt=""> </div> <div class="strict_box" id="main"> <div><span class="iconfont icon-fenhong"></span><span>尊享分红收益</span></div> <div><span class="iconfont icon-xunzhang"></span><span>高额消费金额</span></div> <div><span class="iconfont icon-tishengfantaishuai"></span><span>提升健康水平</span></div> </div> <div class="strict_box1"> <span class="strict_box1_left"><span v-if="state==1">开放认购中</span><span v-else>未开放认购</span></span> <span class="strict_box1_right">认购进度{{progress}}%</span> </div> <div class="progress_box"> <div class="progress" :style="{width:progress+'%'}"></div> </div> <div class="target_box"> <div class="target_item"> <div>{{taget}}人</div> <div class="target_item_bottom">II期目标</div> </div> <div class="target_item"> <div>{{num}}人</div> <div class="target_item_bottom">已认购</div> </div> <div class="target_item"> <div>{{toWan(money)}}元起</div> <div class="target_item_bottom">起购金额</div> </div> </div> <div class="strict_title"> <span :class="['strict_title_item',show_img?'strict_title_item_active':'']" @click="show_img=true">慈界介绍</span> <span @click="show_img=false" :class="{strict_title_item_active:!show_img}">权益方案</span> </div> <div class="strict_content_title" v-show="show_img"> <div><span>慈</span><span class="quan">界介</span><span>绍</span></div> </div> <div class="strict_content_title" v-show="!show_img"> <div><span>权</span><span class="quan">益方</span><span>案</span></div> </div> <div class="strict_box_img" v-show="show_img"> <div v-html="introduce"></div> <!--<img src="../../assets/image/cjit_03.jpg" alt="">--> </div> <div class="strict_box_img" v-show="!show_img"> <div v-html="scheme"></div> <!--<img src="../../assets/image/cjit_02.png" alt="">--> </div> <div class="strict_btn"> <div class="strict_btn_price"><span class="rmb">¥</span>{{money}}元起</div> <div class="strict_btn_right"> <div class="strict_btn_right_item" @click="openCli"><span class="iconfont icon-Fill"></span><span>进群</span> </div> <div class="goPay" @click="go_pay">去认购</div> </div> </div> </div> <footer> <div class="footer_item" :class="{footer_item_active:index==0}" @click="changeTab(0)"> <i class="iconfont icon-yuanjiaojuxingkaobei"></i> <span>严选</span> </div> <div class="footer_item" :class="{footer_item_active:index==1}" @click="changeTab(1)"> <i class="iconfont icon-xingzhuang"></i> <span>投资</span> </div> <div class="footer_item" :class="{footer_item_active:index==2}" @click="changeTab(2)"> <i class="iconfont icon-wo"></i> <span>我的</span> </div> </footer> </div> </body> </html> <script type="text/javascript" src="../../assets/js/api.js"></script> <script type="text/javascript" src="../../assets/js/swiper-3.4.2.min.js"></script> <script type="text/javascript" src="../../assets/js/weui.min.js"></script> <script type="text/javascript" src="../../assets/js/public.js"></script> <script type="text/javascript" src="../../assets/js/fastclick.js"></script> <script type="text/javascript" src="../../assets/js/vue.min.js"></script> <script type="text/javascript" src="../../assets/icon/iconfont.js"></script> <script type="text/javascript" src="../../assets/js/axios.min.js"></script> <script> // window.onLoad = function () { // var map = new AMap.Map('container'); // }; // var url = 'https://webapi.amap.com/maps?v=1.4.8&key=ef53760bd959a4df08b7d4587280e642&callback=onLoad'; // var jsapi = document.createElement('script'); // jsapi.charset = 'utf-8'; // jsapi.src = url; // document.head.appendChild(jsapi); new FastClick(document.body); var app = new Vue({ el: "#app", data: { index: 1, change_index: '', show_img: true, share_show: false, banner: '', state: 0, //开放状态 taget: 0, //目标数量 num: 0, //已认购 progress: 0, //进度 money: 0, //认购金额 introduce: '', //介绍 scheme: '', //方案 wechat: '', top: '0' }, created: function () { this.crowd(); //第三栏 }, mounted: function() { window.addEventListener('scroll', this.handleScroll) }, methods: { // 我的消息 // 去认购 go_pay: function() { openView('strict_pay', '../strict/strict_pay', '认购') }, // 分享 share: function() { api.openFrame({ bgColor: 'rgba(0,0,0,0.05)', name: 'share', url: '../common/share.html', bounces: false, animation: { type: "push", subType: "from_bottom", duration: 300 }, rect: { x: 0, y: 0, w: 'auto', h: 'auto' } }); }, // 展示微信号 openCli: function() { api.openFrame({ bgColor: 'rgba(0,0,0,0.05)', name: 'group', url: '../common/group.html', bounces: false, animation: { type: "reveal", subType: "from_bottom", duration: 300 }, pageParam: { wechat: app.wechat }, rect: { x: 0, y: 0, w: 'auto', h: 'auto' } }); }, // 定位头部 handleScroll: function() { var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; var offsetTop = document.querySelector('#main').offsetTop; if(scrollTop > offsetTop) { app.share_show = true } else { app.share_show = false } }, // 移除监听事件 destroyed: function() { window.removeEventListener('scroll', this.handleScroll) }, // 获取详情 crowd: function() { var app = this; var header = { "XX-Device-Type": getDevice(), 'XX-Token': getToken() }; getRequest('post', 'portal/Goods/crowd', null, header).then(function(res) { // alert(JSON.stringify(res)); if(res.data.code == 1) { app.banner = res.data.data.banner; app.state = res.data.data.state; app.taget = res.data.data.taget; app.num = res.data.data.num; app.progress = res.data.data.progress; app.money = res.data.data.money; app.introduce = res.data.data.introduce; app.scheme = res.data.data.scheme; app.wechat = res.data.data.wechat; } else { toastMsg(res.data.msg) } loadEnd(); }) }, // 切换底部导航 changeTab: function (index) { //跳转页面 var url = index == 0 ? '../index/index_f.html' : index == 1 ? '../strict/strict_f.html' : '../my/my_f.html'; window.location.href = url } } }) </script>