标签：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>开店攻略</title> <link rel="stylesheet" href="css/base.css"> </head> <body> <header class="g-hd"> <a class="back iconfont"></a> <nav class="nav"> <a class="item active J_tab" href="javascript:;" node-data="DATA1">开店攻略</a> <a class="item J_tab" href="javascript:;" node-data="DATA2">????</a> </nav> </header> <div class="profile_box" style="display: block;"> <div class="sdp_sel J_model" style="display: none;"> <h3 class="mod_title trait"> <span class="J_tit"></span> <span class="g_more iconfont"></span> </h3> <div class="mod_bd J_mod_bd" style="display: none;"> <h3 class="mod_title_que"></h3> <ul class="mod_title_ans"></ul> </div> </div> </div> <script src="js/jquery.js"></script> <script src="js/base.js"></script> </body> </html>
var DATA1 = [ { ‘ques‘:‘我能享受到哪些服务保障？‘, ‘answ‘:[ "供应资质审核，保证产品质量", "提供热门产品，时时打造爆款", "最大补贴返利，专题营销策划", "1对1客户经理，处理疑问售后", "资金安全保障，利润实时到账" ] }, { ‘ques‘:‘开店后我该做什么？‘, ‘answ‘:[ "店铺已经开通，下面我们就开始上货吧！", "选货：登录微店平台，在微店主页点击“我要代理”，选择下列四大产品类别“品牌供应商”“航司直供”“特惠尾单”“目的地精选”中你的意向类别； ", "改价：选择类别后，进入产品列表，点击意向产品右下方“添加到我的店铺”，点击“加价”栏，修改或输入加价金额，点击“添加商品”后，产品自动上传到你的旅行啦店铺。" ] }, { ‘ques‘:‘“我要代理”的四大类别是什么？‘, ‘answ‘:[ "品牌供应商：行业最优质旅游供应商资源，高性价比和品质保证；", "航司直供：山航、国航、东航等航司直供特价机票，独家资源抢占市场；", "特惠尾单：高利润特价甩货产品，打造你的店铺爆品。", "目的地精选：境内外热门目的地产品，涵盖跟团游、自由行、特价机票。" ] }, { ‘ques‘:‘如何在类别中快速筛选你想要的产品？‘, ‘answ‘:[ ‘选择代理类别及具体分类后，在该类别产品列表页底部，可以按照“价格”区间，“天数”区间，“出发时间”月份，价格由高到低或由低到高“排序”等四个条件，快速选定产品。‘ ] }, { ‘ques‘:‘如何对上传后的产品进行统一管理？‘, ‘answ‘:[ ‘登录微店主页，点击“商品管理”，可以对“代理商品”进行下架和修改价格管理，更便捷。‘ ] }, { ‘ques‘:‘如何推销我的旅游微店产品？‘, ‘answ‘:[ "依托于51Book平台海量优质旅游产品，通过代理特色旅游产品让你的微店足以媲美主流旅游网站，利用微信和QQ巨大流量入口，提高你品牌知名度，提高订单转化。", "登录旅行啦微店主页，点击“我的微店”，选择“店铺二维码”，手指长按手机页面中的二维码，在跳出的对话框“图片”中，选择“识别图中二维码”等待加载后，进入到你的旅游微店店铺；（哇哦，是不是都不敢相信，简单几步设置就有属于你的高大上的旅游微店？那就赶快向客户推荐吧）", "进入微店后，点击页面右上角微信分享按钮，可以将你的微店推荐到微信好友，微信群，朋友圈，QQ好友，", "进入微店后，点击你想推荐的旅游产品，进入产品详情页面，点击页面右上角微信分享按钮，可以将产品一对一推荐给微信客户、QQ客户、微信群，也可以将产品分享到朋友圈。" ] }, { ‘ques‘:‘如何有效推广我的旅游微店？‘, ‘answ‘:[ ‘推广店铺的渠道，文中介绍的是利用微信本身的功能，对于用户来说，线下门店更是直接渠道，可以制作易拉宝、宣传单页，将二维码放置广告中，配上合适的广告宣传语和促销活动，如满多少立减多少，满多少送多少礼品等等；‘ ] }, { ‘ques‘:‘如何将客户转化为微店粉丝便于二次营销？‘, ‘answ‘:[ ‘旅行社可以申请微信公众账号，通过线下门店易拉宝和广告单页以及线上微信平台，推广你的公众号让新老客户成为公众号粉丝。‘, ‘在公众号中可将微店旅游产品根据类别添加到公众号一级或二级菜单，如三个一级菜单设置为“劲爆特价 热门推荐 聚惠游“，其中”劲爆特价“设置二级菜单“特价机票”“特价线路”等，“热门推荐”设置二级菜单“海岛游”“欧洲游”等等。‘, ‘再配合微信端自动回复、图文素材、群发功能等推广你的旅游产品，实现二次营销。‘ ] }, { ‘ques‘:‘如何通过旅行啦赚钱？‘, ‘answ‘:[ "微店已经拥有媲美携程、途牛等旅游网站产品，更具有线上微信端、QQ、线下门店等灵活多变的推广方式和渠道，那旅行社如何赚钱呢？", "在“开店后我该做什么？“中，我们说到”加价“：登录微店首页，点击”我要代理“，在选择想要售卖的产品时，可以对商品进行修改或添加”加价金额“，所加金额为你获取利润；", "开通微店后，旅行社微店本身拥有的产品售价均为市场价，最终交易后产生的利润（利润=市场价-同行价）归你所有；", "登录微点后，点击“我的钱包“，点击”签到领券“可以领取20元啦啦币（每日签到都有），首次注册旅行啦微店活动200元啦啦币，啦啦币可用于抵扣商品采购金额；" ] }, { ‘ques‘:‘关于啦啦币的二三事儿？‘, ‘answ‘:[ ‘啦啦币是旅行啦专为旅游微店设置的奖励金额，登录微店首页，点击“我的钱包“，”总余额“是指啦啦币的总额，点击”领取记录“，查看领取啦啦币的时间和金额，点击”消费记录“，查看啦啦币的消费明细。‘, ‘旅游江湖从此传唱：“啦啦啦，啦啦啦，我是赚钱的小行家！大风大雨都不怕，啦啦币到我家“！‘ ] }, { ‘ques‘:‘我赚的钱都在哪？‘, ‘answ‘:[ ‘通过旅行啦微店赚取的利润都将在客户“企业钱包“中，登录旅游微店首页，点击”我的钱包“，”总财富“表示你赚取的利润和账户金额余额，在订购产品时可以直接使用”企业钱包“中金额支付，更加便捷、安全。‘ ] }]; var DATA2 = [ { ‘ques‘:‘111111111？‘, ‘answ‘:[ ‘img/1-1.jpg‘, ‘img/1-2.jpg‘ ] }, { ‘ques‘:‘222222？‘, ‘answ‘:[ ‘img/2-1.jpg‘ ] }, { ‘ques‘:‘33333333？‘, ‘answ‘:[ ‘img/3-1.jpg‘ ] } ];
var ACTIVE; $(function(){ function init (selector1,selector2,data){ for (var i = 0; i < data.length; i++) { var tarDom = $(".J_model").clone().appendTo($(‘.profile_box‘)).removeClass(‘J_model‘).addClass(‘J_sdp_sel‘).show(); tarDom.find(‘.‘+selector1).html(data[i].ques); tarDom.find(‘.‘+selector2).find(‘h3‘).append(data[i].ques); for (var j = 0; j < data[i].answ.length; j++) { if(!ACTIVE || ACTIVE == "DATA1"){ tarDom.find(‘.‘+selector2).find(‘ul‘).append(‘<li>‘+data[i].answ[j]+‘</li>‘); }else if(ACTIVE == "DATA2"){ tarDom.find(‘.‘+selector2).append(‘<img src="‘+data[i].answ[j]+‘" alt="咦？答案去哪儿了？？"/>‘); } }; }; $(".mod_title").on("click",function(){ $(‘.back‘).show(); $(this).parent().find(".mod_bd").show(); $(this).parent().find(".g_more").hide(); $(‘.profile_box‘).removeClass(‘back_stage‘).addClass("change_stage"); $("body,html").animate({"scrollTop":0},1); }); } function touches(obj, even, fn){ var defaults = {x: 5, y: 5, ox: 0, oy: 0, nx: 0, ny: 0}; even=even.toLowerCase(); //配置：划的范围在5X5像素内当点击处理 obj.addEventListener("touchstart",function() { defaults.ox = event.targetTouches[0].pageX; defaults.oy = event.targetTouches[0].pageY; defaults.nx = defaults.ox; defaults.ny = defaults.oy; if(even.indexOf("touchstart")!=-1) fn(); }, false); obj.addEventListener("touchmove",function() { defaults.nx = event.targetTouches[0].pageX; defaults.ny = event.targetTouches[0].pageY; if(even.indexOf("touchmove")!=-1) fn(); }, false); obj.addEventListener("touchend",function() { var changeY = defaults.oy - defaults.ny; var changeX = defaults.ox - defaults.nx; if(Math.abs(changeX)>Math.abs(changeY)&&Math.abs(changeY)>defaults.y){ //左右事件 if(changeX > 0) { if(even.indexOf("swipeleft")!=-1) fn() }else{ if(even.indexOf("swiperight")!=-1) fn(); } }else if(Math.abs(changeY)>Math.abs(changeX)&&Math.abs(changeX)>defaults.x){ //上下事件l if(changeY > 0) { if(even.indexOf("swipetop")!=-1) fn(); }else{ if(even.indexOf("swipedown")!=-1) fn(); } }else{ //点击事件 if(even.indexOf("singleTap")!=-1) fn(); } if(even.indexOf("touchend")!=-1) fn(); }, false); }; function backStage(){ $(‘.back‘).hide(); setTimeout(function(){$(".mod_bd").hide();},500); $(".g_more").show(); $(‘.profile_box‘).removeClass("change_stage").addClass(‘back_stage‘); } init(‘J_tit‘,‘J_mod_bd‘,DATA1); $(".back").on("click",backStage); $(".J_tab").on("click",function(){ ACTIVE = $(this).attr("node-data"); if($(‘.change_stage‘)){ backStage(); } $(".J_sdp_sel").remove(); if(ACTIVE == ‘DATA1‘){ init(‘J_tit‘,‘J_mod_bd‘,DATA1); } if(ACTIVE == ‘DATA2‘){ init(‘J_tit‘,‘J_mod_bd‘,DATA2); } $(this).addClass("active").siblings().removeClass("active"); }) touches($("body")[0],‘swiperight‘,function(){ if($(‘.change_stage‘)){ backStage(); } }) });
@charset "utf-8"; /*reset*/ body{font-family:"Helvetica Neue",Helvetica,STHeiTi,Arial,sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,aside,article,figcaption,figure,header,hgroup,menu,nav,section,footer,button{margin: 0;padding: 0;font: 400 14px/1.5 Arial, "Lucida Grande", Verdana, "Microsoft YaHei",hei;} table{border-collapse: collapse;border-spacing: 0;} fieldset,img{border: 0;} address,caption,cite,code,dfn,em,th,var{font-style: normal;font-weight: normal;} ol,ul{list-style: none;} caption,th{text-align: left;} h1,h2,h3,h4,h5,h6{font-size: 100%;font-weight: normal;} q:before,q:after{content: ‘‘;} abbr,acronym{border: 0;font-variant: normal;} sup{vertical-align: text-top;} sub{vertical-align: text-bottom;} input,textarea,select{font-family: inherit;font-size: inherit;font-weight: inherit;} input,textarea,select{*font-size: 100%;} input:focus,textarea:focus,select:focus{outline: none;} select,input{vertical-align: middle;} legend{color: #000;} body{background-color: #f6f6f6; padding-top: 44px; } @font-face{font-family: "iconfont";src: url(‘iconfont.eot‘);src: url(‘iconfont.eot?#iefix‘) format(‘embedded-opentype‘),url(‘iconfont.woff‘) format(‘woff‘),url(‘iconfont.ttf‘) format(‘truetype‘),url(‘iconfont.svg#iconfont‘) format(‘svg‘);} .iconfont{font-family:"iconfont" !important;font-style:normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;} /*reset*/ a{color: #333;text-decoration: none;} a:hover{text-decoration: none;} .f18{font-size: 18px;} .tl{text-align: left;} .tr{text-align: right;} .tc{text-align: center;} .blue{color: #5d9cec;} .green{color: #27aa40;} .gray{color: #525252;} /* header*/ header{position: fixed;top: 0;left: 0;width: 100%;text-align: center;height: 44px;background-color: #19a0e8;line-height: 44px;color: #ffffff;z-index: 9999;} header span,header h1{display: inline-block;height: 44px;line-height: 44px;} .back{font-size: 20px;line-height: 44px;color: #fff;display: none;;width: 44px;height: 44px;float: left;position: absolute;left: 0px;} .g-hd .nav {position: absolute;top: 8px;left: 50%;height: 28px;line-height: 28px;border: 1px #fff solid;border-radius: 3px;-webkit-transform: translateX(-50%);transform: translateX(-50%)} .g-hd .nav .item {float: left;padding: 0 14px;color: #fff} .g-hd .nav .item.active { background-color: #fff;color: #19a0e8} /*list*/ .profile_box{margin-top: -2px;position: relative;} .sdp_sel{background: #fff;border-bottom: 1px solid #e0e0e0;} .sdp_sel h3{padding: 8px 0 8px 10px;line-height: 30px;color: #333} .g_more { margin-right: 10px; padding: 0 5px; float: right; color:#ccc; font-size: 16px; } .mod_bd{padding-top:20px;padding-left: 5%;padding-right: 5%; color: #666;position: absolute;width:90%; height: 100%; left: 100%; background: #fff; top: 0px;} .mod_bd p{font-size: 0.8rem; } .mod_bd img{width: 100%} .mod_bd span{display: inline-block; text-indent: 2em;} .mod_bd ul{margin-left: 20px;} .mod_title_ans li{list-style-type:disc;font-size: 0.8rem; } .mod_title_que{font-size: 120%} .change_stage{ transform: translateX(-100%); -moz-transform: translateX(-100%); -webkit-transform: translateX(-100%); -o-transform: translateX(-100%); animation:changestage .5s; -moz-animation: changestage .5s; -webkit-animation: changestage .5s; -o-animation: changestage .5s; } @keyframes changestage{ from{ transform: translateX(0%); } to{ transform: translateX(-100%); } } @-moz-keyframes changestage{ from{ -moz-transform: translateX(0%); } to{ -moz-transform: translateX(-100%); } } @-webkit-keyframes changestage{ from{ -webkit-transform: translateX(0%); } to{ -webkit-transform: translateX(-100%); } } @-o-keyframes changestage{ from{ -o-transform: translateX(0%); } to{ -o-transform: translateX(-100%); } } .back_stage{ transform: translateX(0%); animation:backstage .5s; -moz-animation: backstage .5s; -webkit-animation: backstage .5s; -o-animation: backstage .5s; } @keyframes backstage{ from{ transform: translateX(-100%); } to{ transform: translateX(0%); } } @-moz-keyframes backstage{ from{ -moz-transform: translateX(-100%); } to{ -moz-transform: translateX(0%); } } @-webkit-keyframes backstage{ from{ -webkit-transform: translateX(-100%); } to{ -webkit-transform: translateX(0%); } } @-o-keyframes backstage{ from{ -o-transform: translateX(0%); } to{ -o-transform: translateX(-100%); } }
标签：
原文地址：http://www.cnblogs.com/niunaimidou/p/4482162.html
