作者 lihan

食品本地对接

要显示太多修改。

为保证性能只显示 24 of 24+ 个文件。

<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
<name>TakeFood</name>
<comment></comment>
<projects>
</projects>
<buildSpec>
<buildCommand>
<name>com.aptana.ide.core.unifiedBuilder</name>
<arguments>
</arguments>
</buildCommand>
</buildSpec>
<natures>
<nature>com.aptana.projects.webnature</nature>
</natures>
<filteredResources>
<filter>
<id>1525403963380</id>
<name></name>
<type>26</type>
<matcher>
<id>org.eclipse.ui.ide.multiFilter</id>
<arguments>1.0-name-matches-false-false-node_modules</arguments>
</matcher>
</filter>
<filter>
<id>1532921264994</id>
<name></name>
<type>26</type>
<matcher>
<id>org.eclipse.ui.ide.multiFilter</id>
<arguments>1.0-name-matches-false-false-node_modules</arguments>
</matcher>
</filter>
<filter>
<id>1533519359159</id>
<name></name>
<type>26</type>
<matcher>
<id>org.eclipse.ui.ide.multiFilter</id>
<arguments>1.0-name-matches-false-false-node_modules</arguments>
</matcher>
</filter>
</filteredResources>
</projectDescription>
... ...
<!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" />
<link rel="stylesheet" type="text/css" href="../css/swiper-3.4.2.min.css" />
<link rel="stylesheet" type="text/css" href="../css/init.css" />
<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_647640_n3cow34ja3gzaor.css" />
<link rel="stylesheet" type="text/css" href="../css/PersonCenter/PersonCenter.css" />
<script src="../js/base.js" type="text/javascript" charset="utf-8"></script>
<title>个人中心</title>
<style>
[ v-cloak]{
display:none;
}
</style>
</head>
<body>
<div class="container" id="personcenter" v-cloak>
<!--遮罩-->
<div class="wrap">
<!--弹层-->
<div class="popup">
<p>— 咨询热线 —</p>
<span>1540098838</span>
<div class="popup_footer">
立即拨打
</div>
</div>
</div>
<!--个人信息-->
<div class="person">
<div class="person_info">
<!--<img src="../img/bpic03@2x.png" />-->
<img :src="personinfo.head_img" />
<p class="person_name">{{personinfo.nickname}}</p>
<!--<p class="person_name">微信名称</p>-->
<span class="person_info_btn">全部订单</span>
</div>
</div>
<!--待支付-制作中--->
<div class="white">
<div class="white_item pend_pay" v-for="item in persontype" @click="jump(item)">
<i class="iconfont icon-wallet_icon"></i>
<p>{{item.status}}</p>
<span v-if="item.count>0" class="white_item_num">{{item.count}}</span>
</div>
<!--<div class="white_item pend_pay">
<i class="iconfont icon-wallet_icon"></i>
<p>待支付</p>
<span class="white_item_num">12</span>
</div>
<div class="white_item pend_make">
<i class="iconfont icon-hdxq_icon1"></i>
<p>制作中</p>
<span class="white_item_num">0</span>
</div>
<div class="white_item pend_take">
<i class="iconfont icon-yizhifu"></i>
<p>待取货</p>
<span class="white_item_num">0</span>
</div>
<div class="white_item pend_evaluate">
<i class="iconfont icon-31daipingjia"></i>
<p>待评价</p>
<span class="white_item_num">0</span>
</div>
<div class="white_item pend_finish">
<i class="iconfont icon-yiwancheng1"></i>
<p>已完成</p>
<span class="white_item_num">0</span>
</div>-->
</div>
<!--我的钱包-->
<div class="menu_list">
<div class="menu_item my_wallet">
<i class="iconfont icon-qianbao"></i>
<p>我的钱包</p>
<span>&gt;</span>
</div>
<div class="menu_item discount_page">
<i class="iconfont icon-youhuiquan"></i>
<p>我的优惠券</p>
<span>&gt;</span>
</div>
<div class="menu_item">
<i class="iconfont icon-liwu"></i>
<p>分享有礼</p>
<span>&gt;</span>
</div>
<div class="menu_item service">
<i class="iconfont icon-VectorSmartObject" style="color:#CDBEEC"></i>
<p>联系客服</p>
<span>&gt;</span>
</div>
<div class="menu_item aboutus" @click="aboutus()">
<i class="iconfont icon-erji" style="color:#CDBEEC"></i>
<p>关于我们</p>
<span>&gt;</span>
</div>
</div>
<!--footer-->
<div class="footer" v-cloak>
<div class="footer_item">
<a href="../index.html"><img src="../img/menu_icon1_select@2x_81.png" /><span>首页</span></a>
</div>
<div class="footer_item">
<a href="../shopcar.html"><img src="../img/9拷贝@2x.png" />
<span>购物车</span>
</a>
<span class="foot_cartnum" v-if="cartnum>0">{{cartnum}}</span>
</div>
<div class="footer_item footer_active">
<a href=""><img src="../img/menu_icon3_select@2x_57.png" /><span>我的</span></a>
</div>
</div>
</div>
<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/cookie.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/swiper-3.4.2.jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/personcenter.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var service = document.getElementsByClassName('service')[0];
var wrap = document.getElementsByClassName('wrap')[0];
var popup = document.getElementsByClassName('popup')[0];
var popup_footer = document.getElementsByClassName('popup_footer')[0];
popup_footer.onclick = function(ev) {
var oEvent = ev || event
oEvent.concelable = true;
oEvent.stopPropagation();
}
service.onclick = function() {
wrap.style.display = 'block';
}
wrap.onclick = function() {
wrap.style.display = 'none';
}
var person_info_btn = document.getElementsByClassName('person_info_btn')[0];
person_info_btn.onclick = function() {
window.location.href = '../myorder/myorder.html'
}
var my_wallet = document.getElementsByClassName('my_wallet')[0];
my_wallet.onclick = function() {
window.location.href = 'wallet.html';
}
var discount_page = document.getElementsByClassName('discount_page')[0];
discount_page.onclick = function() {
window.location.href = 'discount.html';
}
//待支付,制作中等跳转页面
var pend_make = document.getElementsByClassName('pend_make')[0];
var pend_pay = document.getElementsByClassName('pend_pay')[0];
var pend_take = document.getElementsByClassName('pend_take')[0];
var pend_evaluate = document.getElementsByClassName('pend_evaluate')[0];
var pend_finish = document.getElementsByClassName('pend_finish')[0];
pend_pay.onclick = function() {
window.location.href = '../myorder/myorder.html';
}
pend_make.onclick = function() {
window.location.href = '../myorder/myorder.html';
}
pend_take.onclick = function() {
window.location.href = '../myorder/myorder.html';
}
pend_evaluate.onclick = function() {
window.location.href = '../myorder/myorder.html';
}
pend_finish.onclick = function() {
window.location.href = '../myorder/myorder.html';
}
//待支付,制作中 数量
var white_item_num = document.getElementsByClassName('white_item_num');
for(i = 0; i < white_item_num.length; i++) {
if(parseInt(white_item_num[i].innerHTML) < 1) {
white_item_num[i].style.display = 'none';
}
}
</script>
</body>
</html>
\ No newline at end of file
... ...
<!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" />
<link rel="stylesheet" type="text/css" href="../css/swiper-3.4.2.min.css" />
<link rel="stylesheet" type="text/css" href="../css/init.css" />
<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_647640_n3cow34ja3gzaor.css" />
<link rel="stylesheet" type="text/css" href="../css/PersonCenter/discount.css" />
<script src="../js/base.js" type="text/javascript" charset="utf-8"></script>
<title>我的优惠券</title>
<style>
.nodata{
margin-top: 90px;
text-align: center;
color: #999;
font-size: 14px;
}
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div class="container" id="discount">
<!--导航-->
<div class="nav">
<ul>
<li class="active" @click="unuse($event)">未使用</li>
<li @click="alreadyuse($event)">已使用</li>
<li @click="expired($event)">已过期</li>
</ul>
</div>
<!--优惠券-->
<!--<div class="discount tab">
<div class="discount_item">
<div class="discount_item_num">
<div class="discount_item_num_bxo">
<p>50</p>
<p>元</p>
</div>
<div class="discount_item_time">
<span>全场购物满300元,立减50元</span>
<span>有效期截止:2018年5月9日</span>
</div>
</div>
<div class="discount_item_btn">
立即使用<span>&gt;</span>
</div>
</div>
<div class="discount_item">
<div class="discount_item_num">
<div class="discount_item_num_bxo">
<p>50</p>
<p>元</p>
</div>
<div class="discount_item_time">
<span>全场购物满300元,立减50元</span>
<span>有效期截止:2018年5月9日</span>
</div>
</div>
<div class="discount_item_btn">
立即使用<span>&gt;</span>
</div>
</div>
</div>-->
<div class="discount tab" v-cloak>
<div class="discount_item" v-for="item in discount" :id="item.id">
<div class="discount_item_num">
<div class="discount_item_num_bxo">
<p>{{item.reduce}}</p>
<p></p>
</div>
<div class="discount_item_time">
<span>{{item.discount_coupon_name}}</span>
<span>有效期截止:{{item.deadline}}</span>
</div>
</div>
<div class="discount_item_btn">
立即使用<span>&gt;</span>
</div>
</div>
<!--<div class="discount_item">
<div class="discount_item_num">
<div class="discount_item_num_bxo">
<p>50</p>
<p>元</p>
</div>
<div class="discount_item_time">
<span>全场购物满300元,立减50元</span>
<span>有效期截止:2018年5月9日</span>
</div>
</div>
<div class="discount_item_btn">
立即使用<span>&gt;</span>
</div>
</div>-->
</div>
<!--已使用-->
<!--<div class="discountuesd tab">
<div class="discount_item">
<div class="discount_item_num">
<div class="discount_item_num_bxo">
<p>50</p>
<p>元</p>
</div>
<div class="discount_item_time">
<span>全场购物满300元,立减50元</span>
<span>有效期截止:2018年5月9日</span>
</div>
</div>
<div class="discountuesd_item_btn">
已使用<span>&gt;</span>
</div>
</div>
<div class="discount_item">
<div class="discount_item_num">
<div class="discount_item_num_bxo">
<p>50</p>
<p>元</p>
</div>
<div class="discount_item_time">
<span>全场购物满300元,立减50元</span>
<span>有效期截止:2018年5月9日</span>
</div>
</div>
<div class="discountuesd_item_btn">
已使用<span>&gt;</span>
</div>
</div>
</div>
-->
<!--已过期-->
<!--<div class="discountuesd tab">
<div class="discount_item">
<div class="discount_item_num">
<div class="discount_item_num_bxo">
<p>50</p>
<p>元</p>
</div>
<div class="discount_item_time">
<span>全场购物满300元,立减50元</span>
<span>有效期截止:2018年5月9日</span>
</div>
</div>
<div class="discountuesd_item_btn">
已过期<span>&gt;</span>
</div>
</div>
<div class="discount_item">
<div class="discount_item_num">
<div class="discount_item_num_bxo">
<p>50</p>
<p>元</p>
</div>
<div class="discount_item_time">
<span>全场购物满300元,立减50元</span>
<span>有效期截止:2018年5月9日</span>
</div>
</div>
<div class="discountuesd_item_btn">
已过期<span>&gt;</span>
</div>
</div>
</div>-->
<!--没有优惠券提醒-->
<div class="nodata" v-if="discount.length==0">
暂无优惠券
</div>
</div>
</div>
<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/cookie.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/swiper-3.4.2.jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/discount.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// window.onload = function() {
// var aLi = document.getElementsByClassName('nav')[0].getElementsByTagName('li');
// var tab = document.getElementsByClassName('tab');
// for(i = 0; i < aLi.length; i++) {
// aLi[i].index = i;
// tab[i].style.display = 'none';
// tab[0].style.display = 'block';
// aLi[i].onclick = function(){
// for (j=0; j<aLi.length; j++) {
// tab[j].style.display = 'none';
// aLi[j].className = '';
// }
// this.classList.add('active');
// tab[this.index].style.display="block";
// }
// }
//
// }
</script>
</body>
</html>
\ No newline at end of file
... ...
<!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" />
<link rel="stylesheet" type="text/css" href="../css/swiper-3.4.2.min.css" />
<link rel="stylesheet" type="text/css" href="../css/init.css" />
<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_647640_n3cow34ja3gzaor.css" />
<link rel="stylesheet" type="text/css" href="../css/PersonCenter/topus.css" />
<script src="../js/base.js" type="text/javascript" charset="utf-8"></script>
<title>充值</title>
<style>
.wrapper{
width: 8rem;
height: 100%;
background-color: rgba(0,0,0,0.5);
position: fixed;
z-index: 2;
margin-left: -0.4rem;
}
.illustrate{
width: 6.48rem;
height: 7.2rem;
position: absolute;
z-index: 3;
background-color: #FFFFFF;
left: 1rem;
top: 2.63rem;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 0.15rem;
}
.certain{
width: 6.48rem;
height:0.8rem;
background:RGBA(0, 145, 229, 1);
color:#FFFFFF;
border:none;
outline:none;
position:absolute;;
top:6.7rem;
}
/*标题*/
.title{
position:absolute;
top:0.4rem;
}
.explain{
font-size: 0.4rem;
color:RGBA(51, 51, 51, 1);
}
.text{
font-size: 0.3rem;
position:absolute;
top:1.2rem;
width:5.4rem;
color:RGBA(102, 102, 102, 1);
height:5.2rem;
overflow: auto;
}
</style>
</head>
<body>
<div class="container" id="card">
<!--弹出框-->
<!--遮罩层-->
<div class="wrapper">
<!--弹出内容-->
<div class="illustrate">
<div class="title">
<p class="explain">充值卡使用说明</p>
</div>
<div class="text">
美食美食美食美食美食美食美食美食
美食美食美食美食美食美食美食美食
美食美食美食美食
美食美食美食美食
美食美食美食美食
美食美食美食美食美食美食美食美食
美食美食美食美食美食美食美食美食
美食美食美食美食
美食美食美食美食
美食美食美食美食
美食美食美食美食美食美食美食美食
美食美食美食美食美食美食美食美食
美食美食美食美食
美食美食美食美食
美食美食美食美食
美食美食美食美食美食美食美食美食
美食美食美食美食美食美食美食美食
美食美食美食美食
美食美食美食美食
美食美食美食美食
</div>
<button class="certain">确定</button>
</div>
</div>
<div class="header">
<i class="iconfont icon-my_icon"></i><p>充值卡使用说明</p>
</div>
<!--<div class="top_us_card">
<p class="top_us_num">充值面额</p>
<div class="top_us_num_wrap">
<p class="forever">有效期:永久</p>
<p class="give_num">赠送50元</p>
<span class="btn">立即充值</span>
</div>
<div class="money">
<p class="icon">¥</p><p class="money_num">100</p>
</div>
</div>-->
<div class="top_us_card" v-for="item in cardindex" :id="item.id">
<p class="top_us_num">充值面额</p>
<div class="top_us_num_wrap">
<p class="forever">有效期:永久</p>
<p class="give_num">赠送{{item.bonus}}元</p>
<span class="btn" @click="recharge(item)">立即充值</span>
</div>
<div class="money">
<p class="icon">¥</p><p class="money_num">{{item.denomination}}</p>
</div>
</div>
</div>
<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/cookie.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/swiper-3.4.2.jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/topus.js" type="text/javascript" charset="utf-8"></script>
<script>
$(".certain").click(function(){
$('.wrapper').css("display","none")
});
$(".wrapper").click(function(){
$(this).css("display","none")
});
//充值卡充值弹出弹出框
$(".header").click(function(){
// alert(111)
$(".wrapper").css("display","block")
});
</script>
</body>
</html>
... ...
<!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" />
<link rel="stylesheet" type="text/css" href="../css/swiper-3.4.2.min.css" />
<link rel="stylesheet" type="text/css" href="../css/init.css" />
<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_647640_n3cow34ja3gzaor.css" />
<link rel="stylesheet" type="text/css" href="../css/PersonCenter/wallet.css" />
<script src="../js/base.js" type="text/javascript" charset="utf-8"></script>
<title>我的钱包</title>
</head>
<body>
<div class="container" id="wallet">
<div class="banner">
<p class="balance">钱包余额</p>
<div class="money">
<p class="balance_num">{{money}}</p><span class="balance_num_unit"></span>
</div>
</div>
<div class="menu_list">
<div class="menu_item topus">
<i class="iconfont icon-balance"></i>
<p>去充值</p>
<span>&gt;</span>
</div>
<div class="menu_item walletdetails">
<i class="iconfont icon-icon-test"></i>
<p>钱包明细</p>
<span>&gt;</span>
</div>
</div>
</div>
<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/cookie.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/swiper-3.4.2.jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/wallet.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var topus = document.getElementsByClassName('topus')[0];
var walletdetails = document.getElementsByClassName('walletdetails')[0];
topus.onclick = function(){
window.location.href = 'topus.html';
}
walletdetails.onclick = function(){
window.location.href = 'walletdetails.html';
}
</script>
</body>
</html>
... ...
<!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" />
<link rel="stylesheet" type="text/css" href="../css/swiper-3.4.2.min.css" />
<link rel="stylesheet" type="text/css" href="../css/init.css" />
<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_647640_n3cow34ja3gzaor.css" />
<link rel="stylesheet" type="text/css" href="../css/PersonCenter/walletdetails.css" />
<script src="../js/base.js" type="text/javascript" charset="utf-8"></script>
<title>钱包明细</title>
</head>
<body>
<div class="container" id="walletdetail">
<div class="details">
<!--<div class="details_item">
<div class="buy_wrap">
<p class="buy">购买胡辣汤</p>
<p class="num">- ¥1000</p>
</div>
<div class="buy_wrap">
<p class="time">2018-3-27&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;18:09</p>
<p class="time">支出</p>
</div>
</div>
<div class="details_item">
<div class="buy_wrap">
<p class="buy">充值</p>
<p class="num_add">+ ¥1000</p>
</div>
<div class="buy_wrap">
<p class="time">2018-3-27&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;18:09</p>
<p class="time">收入</p>
</div>
</div>-->
<div class="details_item" v-for="item in detail">
<div class="buy_wrap">
<p class="buy">{{item.log_type}}</p>
<p class="num" v-if="item.log_type=='购买商品'">-¥{{item.amount}}</p>
<p class="num_add" v-if="item.log_type=='充值'">+¥{{item.amount}}</p>
</div>
<div class="buy_wrap">
<p class="time">{{item.create_time}}</p>
<p class="time">{{item.log_type}}</p>
</div>
</div>
</div>
</div>
<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/cookie.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/swiper-3.4.2.jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/walletdetail.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
\ No newline at end of file
... ...
<!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" />
<link rel="stylesheet" type="text/css" href="css/swiper-3.4.2.min.css" />
<link rel="stylesheet" type="text/css" href="css/init.css" />
<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_647640_n3cow34ja3gzaor.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script src="js/base.js" type="text/javascript" charset="utf-8"></script>
<title>门店详情</title>
</head>
<body>
<div class="container" id="spotdetail">
<div class="add_wrap">
<div class="add_wrap_text">
<p style="font-size: 0.3rem;margin-bottom: 0.3rem;">详细地址</p>
<p style="font-size: 0.28rem; color: #666666;margin-top: 0.21rem;">{{spotdetail.spot_detail_address}}</p>
</div>
<span>场景图片</span>
<div class="address_pic_list" v-html="spotdetail.photo">
<!--<img src="img/2@2x.png" />
<img src="img/@2x.png" />
<img src="img/2@2x.png" />
<img src="img/@2x.png" />
<img src="img/2@2x.png" />
<img src="img/@2x.png" />
<img src="img/2@2x.png" />
<img src="img/@2x.png" />-->
</div>
</div>
</div>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/swiper-3.4.2.jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/cookie.js" type="text/javascript" charset="utf-8"></script>
<script src="js/takedetails.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
\ No newline at end of file
... ...
<!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" />
<link rel="stylesheet" type="text/css" href="css/swiper-3.4.2.min.css" />
<link rel="stylesheet" type="text/css" href="css/init.css" />
<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_647640_to180rktm1butyb9.css" />
<link rel="stylesheet" type="text/css" href="css/about.css" />
<script src="js/base.js" type="text/javascript" charset="utf-8"></script>
<title>关于我们</title>
</head>
<body>
<div class="container" id="aboutus">
<!--banner-->
<div class="about_banner">
<!--<img src="img/矩形10@2x.png" />-->
<img :src="about.thumb" />
</div>
<!--文字-->
<div class="about_text">
<h1>{{about.post_title}}</h1>
<div v-html="about.post_content">
<!--<p>胡辣汤由多种天然中草药按比例配制的汤料再加入胡椒和辣椒又用骨头汤做底料的胡辣汤,其特点是汤味浓郁、汤色靓丽、汤汁粘稠,香辣可口,十分适合配合其它早点进餐。
</p>
<p>目前,已经发展成为河南及陕西等周边省份都喜爱和知晓的小吃之一。
</p>
<p>是中国河南的特色汤类食品,后传入陕西,被大家所喜爱,常作为早餐,其特点是麻辣鲜香,营养开胃,适合搭配油条、包子、葱油饼、锅盔,千层饼等面点。
</p>
<p>可与豆腐脑约1:1混合,称为“两掺”,降低了麻辣程度,不仅卖相更好看了,而且也很受欢迎。</p>-->
</div>
</div>
<!--<div class="edit">
文本编辑区
</div>-->
</div>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/cookie.js" type="text/javascript" charset="utf-8"></script>
<script src="js/swiper-3.4.2.jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/aboutus.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
\ No newline at end of file
... ...
<!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" />
<link rel="stylesheet" type="text/css" href="css/swiper-3.4.2.min.css" />
<link rel="stylesheet" type="text/css" href="css/init.css" />
<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_647640_n3cow34ja3gzaor.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script src="js/base.js" type="text/javascript" charset="utf-8"></script>
<title>门店详情</title>
</head>
<body>
<div class="container" id="addressdetail">
<div class="add_wrap">
<div class="add_wrap_text">
<p style="font-size: 0.3rem;margin-bottom: 0.3rem;">{{address.store_name}}<span style="font-size: 0.28rem; color: #FCB801; margin-left: 0.31rem;">距您{{address.distance_text}}</span></p>
<p style="font-size: 0.28rem; color: #666666;"><i class="iconfont icon-hdxq_icon1" style="font-size: 0.26rem; margin-right: 0.15rem;"></i>营业时间:{{address.open_start}}-{{address.open_end}}</p>
<p style="font-size: 0.28rem; color: #666666;margin-top: 0.21rem;"><i class="iconfont icon-hdxq_icon" style="font-size: 0.26rem; margin-right: 0.15rem;"></i>{{address.store_address}}</p>
</div>
<span>场景图片</span>
<div class="address_pic_list" v-html="photo">
<!--<img src="img/2@2x.png" />-->
<!--<img src="img/@2x.png" />-->
<!--<img src="img/2@2x.png" />-->
<!--<img src="img/@2x.png" />-->
<!--<img src="img/2@2x.png" />-->
<!--<img src="img/@2x.png" />-->
<!--<img src="img/2@2x.png" />-->
<!--<img src="img/@2x.png" />-->
</div>
</div>
</div>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/swiper-3.4.2.jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/cookie.js" type="text/javascript" charset="utf-8"></script>
<script src="js/addressdetail.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
\ No newline at end of file
... ...
.container{
padding: 0 0.4rem;
position: relative;
font-family:PingFangSC-Regular;;
}
/*遮罩*/
.wrap{
width: 7.5rem;
height: 100%;
background-color:rgba(0,0,0,0.5);
position: fixed;
z-index: 2;
margin-left: -0.4rem;
display: none;
}
/*弹层*/
.popup{
width: 5.48rem;
height: 3.2rem;
position: absolute;
z-index: 3;
background-color: #FFFFFF;
left: 1rem;
top: 4.63rem;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 0.15rem;
overflow: hidden;
}
.popup p{
font-size: 0.26rem;
color: #999999;
margin-top: 0.7rem;
text-align: center;
}
.popup span{
font-size: 0.42rem;
margin-top: 0.4rem;
color: #333333;
text-align: center;
}
.popup_footer{
width: 5.48rem;
height: 0.8rem;
position: absolute;
bottom: 0;
left: 0;
background-color: #FFB800;
text-align: center;
line-height: 0.8rem;
color: #FFFFFF;
font-size: 0.3rem;
}
/*个人信息*/
.person_info{
display: flex;
align-items: center;
margin-top: 0.42rem;
}
.person_info img{
width: 1.08rem;
height: 1.08rem;
display: block;
border-radius: 50%;
margin-right: 0.41rem;
}
.person_name{
font-size: 0.34rem;
color: #333333;
margin-right: 2.1rem;
white-space: nowrap;
width:1.3rem;
}
.person_info_btn{
font-size: 0.26rem;
color: #FEAD00;
display: block;
width: 1.68rem;
height: 0.57rem;
line-height: 0.57rem;
text-align: center;
border: 1px solid #FEAD00;
border-radius: 0.29rem;
}
/*待支付-制作中*/
.white{
display: flex;
margin-top: 0.64rem;
}
.white .iconfont{
font-size: 0.4rem;
text-align: center;
margin-bottom: 0.14rem;
}
.white_item{
display: flex;
flex-direction: column;
width: 25%;
position: relative;
}
.white_item p{
font-size: 0.26rem;
color: #666666;
text-align: center;
}
.white_item_num{
position: absolute;
width: 0.28rem;
height: 0.28rem;
background-color: #FF4800;
right: 0.3rem;
top: -0.1rem;
border-radius: 50%;
color: #FFFFFF;
font-size: 0.2rem;
text-align: center;
line-height: 0.28rem;
}
/*我的钱包*/
.menu_list{
margin-top: 0.3rem;
}
.menu_item{
display: flex;
height: 1.1rem;
line-height: 1.1rem;
border-bottom: 1px solid #E4E4E4;
}
.menu_item p{
font-size: 0.3rem;
color: #333333;
margin-left: 0.21rem;
white-space: nowrap;
position: relative;
}
.menu_item span{
font-size: 0.2rem;
position: absolute;
right: 0.57rem;
}
.menu_list .icon-qianbao{
color: #FEE19D;
font-size: 0.3rem;
}
.menu_list .icon-youhuiquan{
color: #FEBAAE;
font-size: 0.24rem;
}
.menu_list .icon-liwu{
font-size: 0.3rem;
color: #FEBF8C;
}
.menu_list .icon-erji{
font-size: 0.3rem;
color: #CDBEEC;
}
/*footer*/
.footer{
position: fixed;
bottom: 0;
left: 0;
width: 7.5rem;
left: 50%;
margin-left: -3.75rem;
border-top: 1px solid #CCCCCC;
background-color: #FFFFFF;
font-size: 0.22rem;
height: 1rem;
display: flex;
justify-content: space-around;
}
.footer_item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.footer_item span{
color: #999999;
}
.footer_item img{
width: 0.7rem;
height: 0.7rem;
}
.footer_active span{
color: #FEAD00;
}
\ No newline at end of file
... ...
.container{
position: relative;
font-family:PingFangSC-Regular;
}
.nav {
margin-bottom: 0.65rem;
}
.nav ul {
display: flex;
font-size: 0.3rem;
margin-top: 0.44rem;
justify-content: center;
}
.nav ul li{
display: block;
width: 30%;
text-align: center;
color: #666666;
}
.nav .active {
color: #333333;
position: relative;
}
.nav .active:before{
content: '';
display: block;
width: 0.48rem;
height: 0.1rem;
background-color: #FFCC00;
position: absolute;
left: 0.65rem;
bottom: 0;
top: 0.44rem;
border-radius: 0.05rem;
}
/*discount*/
.discount_item{
width: 7rem;
margin: 0.25rem auto 0;
border: 1px solid #E4E4E4;
border-radius: 0.15rem;
}
.discount_item_num{
width: 7rem;
height: 1.7rem;
border-bottom: none;
display: flex;
position: relative;
}
.discount_item_num_bxo{
display: flex;
align-items: baseline;
}
.discount_item_num:before{
content: '';
display: block;
width: 0.08rem;
height: 0.16rem;
position: absolute;
background-color: #FFFFFF;
left: -0.015rem;
bottom: -0.1rem;
border: 1px solid #E4E4E4;
border-left: none;
z-index: 22;
border-radius: 0 0.16rem 0.16rem 0;
}
.discount_item_num:after{
content: '';
display: block;
width: 0.08rem;
height: 0.16rem;
position: absolute;
background-color: #FFFFFF;
bottom: -0.1rem;
right: 0.01rem;
border: 1px solid #E4E4E4;
border-right: none;
z-index: 22;
border-radius: 0.16rem 0 0 0.16rem ;
}
.discount_item_num p:nth-child(1){
font-size: 0.8rem;
color: #C90103;
line-height: 1.7rem;
margin-left: 0.6rem;
}
.discount_item_num p:nth-child(2){
font-size: 0.26rem;
color: #999999;
margin-left: 0.13rem;
}
.discount_item_time{
display: flex;
flex-direction: column;
height: 100%;
margin-left: 0.6rem;
}
.discount_item_time span:nth-child(1){
font-size: 0.3rem;
color: #333333;
margin-top: 0.54rem;
}
.discount_item_time span:nth-child(2){
font-size: 0.26rem;
color: #999999;
margin-top: 0.21rem;
}
.discount_item_btn,.discountuesd_item_btn{
width: 7rem;
height: 0.83rem;
border-top: 1px dotted #E4E4E4;
font-size: 0.3rem;
line-height: 0.83rem;
text-align: center;
}
.discount_item_btn{
color: #C90103;
}
.discount_item_btn span{
margin-left: 0.22rem;
}
/*已使用*/
.discountuesd_item_btn{
color: #666666;
}
.discountuesd_item_btn span{
margin-left: 0.22rem;
}
... ...
.container{
position: relative;
font-family:PingFangSC-Regular;;
}
.header{
display: flex;
justify-content: flex-end;
margin-top: 0.3rem;
margin-bottom: 0.4rem;
margin-right: 0.41rem;
}
.header .icon-my_icon{
font-size: 0.3rem;
color: #999999;
margin-right: 0.11rem;
}
.header p{
font-size: 0.28rem;
color: #666666;
}
.top_us_card{
width: 7rem;
height: 3.36rem;
background: url(../../img/矩形1@2x.png) center no-repeat;
margin: 0 auto;
border-radius: 0.15rem;
padding: 0.4rem 0.4rem 0.46rem 0.43rem;
color: #FFFFFF;
display: flex;
justify-content: space-between;
position: relative;
margin-bottom: 0.44rem;
}
.top_us_num{
font-size: 0.28rem;
color: #FFFFFF;
width: 1.5rem;
}
.top_us_num_wrap{
float: right;
display: flex;
width: 50%;
flex-direction: column;
align-items: flex-end;
}
.forever ,.give_num{
font-size: 0.28rem;
}
.give_num{
margin-top: 0.4rem;
}
.top_us_card .btn{
display: block;
font-size: 0.3rem;
color: #333333;
width: 1.91rem ;
height: 0.71rem;
text-align: center;
line-height: 0.71rem;
background-color: #FFE400;
border-radius: 0.08rem;
margin-top: 0.86rem;
}
.money {
display: flex;
position: absolute;
left: 0.48rem;
top: 1.56rem;
}
.money .icon{
font-size: 0.48rem;
left: 0.48rem;
top: 1.9rem;
margin-top: 0.3rem;
margin-right: 0.08rem;
}
.money .money_num{
left: 0.85rem;
top: 1.56rem;
font-size: 0.86rem;
}
... ...
.container{
position: relative;
font-family:PingFangSC-Regular;;
}
/*banner*/
.banner{
width: 100%;
background: url(../../img/矩形1@2x.png) center no-repeat;
background-size: 100% 100%;
height: 3.7rem;
color: #FFFFFF;
padding: 0.4rem 0.44rem;
}
.balance{
font-size: 0.28rem;
}
.balance_num{
font-size: 0.86rem;
}
.balance_num_unit{
font-size: 0.26rem;
line-height: 1.4rem;
margin-left: 0.18rem;
}
.money{
display: flex;
width: 2rem;
margin: 0 auto;
margin-top: 0.7rem;
}
/*我的钱包*/
.menu_list{
margin-top: 0.06rem;
}
.menu_item{
display: flex;
height: 1.1rem;
line-height: 1.1rem;
border-bottom: 1px solid #E4E4E4;
padding-left: 0.4rem;
}
.menu_item p{
font-size: 0.3rem;
color: #333333;
margin-left: 0.21rem;
white-space: nowrap;
position: relative;
}
.menu_item span{
font-size: 0.2rem;
position: absolute;
right: 0.57rem;
}
.menu_item .icon-balance{
font-size: 0.3rem;
color: #7FCBFF;
}
.menu_item .icon-icon-test{
font-size: 0.3rem;
color: #F6C687;
}
... ...
.container{
position: relative;
font-family:PingFangSC-Regular;;
}
.details_item{
padding: 0.6rem 0.4rem;
border-bottom: 1px solid #E4E4E4;
}
.buy_wrap{
display: flex;
justify-content: space-between;
}
.buy_wrap:first-child{
margin-bottom: 0.2rem;
}
.buy{
font-size: 0.3rem;
color: #333333;
}
.num{
font-size: 0.3rem;
color: #ED4300;
}
.time{
font-size: 0.26rem;
color: #999999;
}
.num_add{
font-size: 0.3rem;
color: #00A9FF;
}
... ...
.about_banner{
width: 100%;
height: 4.48rem;
margin-bottom: 0.7rem;
overflow: hidden;
font-family: font-family:PingFangSC-Regular;;
}
.about_banner img{
width: 100%;
height: 100%;
}
/*文字*/
.about_text{
padding: 0 0.43rem 0.56rem;
border-bottom: 1px solid #E4E4E4;
}
.about_text h1{
font-size: 0.32rem;
color: #1A1A1A;
text-align: center;
margin-bottom: 0.37rem;
}
.about_text p{
font-size: 0.28rem;
color: #666666;
line-height: 0.48rem;
}
/*文本编辑区*/
.edit{
font-size: 0.28rem;
color: #666666;
text-align: center;
}
... ...
此 diff 太大无法显示。
body{
/*background: #494A5F;
color: #D5D6E2;*/
font-weight: 500;
font-size: 0.2em;
font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
}
a{color: #2fa0ec;text-decoration: none;outline: none;}
a:hover,a:focus{color:#74777b;}
.container{
margin: 0 auto;
overflow: hidden;
}
\ No newline at end of file
... ...
body, html {
height: 100%;
-webkit-tap-highlight-color: transparent;
}
.demos-title {
text-align: center;
font-size: 34px;
color: #3cc51f;
font-weight: 400;
margin: 0 15%;
}
.demos-sub-title {
text-align: center;
color: #888;
font-size: 14px;
}
.demos-header {
padding: 35px 0;
}
.demos-content-padded {
padding: 15px;
}
.demos-second-title {
text-align: center;
font-size: 24px;
color: #3cc51f;
font-weight: 400;
margin: 0 15%;
}
footer {
text-align: center;
font-size: 14px;
padding: 20px;
}
footer a {
color: #999;
text-decoration: none;
}
... ...
body,html{height:100%;-webkit-tap-highlight-color:transparent}body{font-family:-apple-system-font,Helvetica Neue,Helvetica,sans-serif}ul{list-style:none}.page,body{background-color:#f8f8f8}.link{color:#1aad19}.container{overflow:hidden}.container,.page{position:absolute;top:0;right:0;bottom:0;left:0}.page{overflow-y:auto;-webkit-overflow-scrolling:touch;opacity:0;z-index:1}.page.js_show{opacity:1}.page__hd{padding:40px}.page__bd_spacing{padding:0 15px}.page__ft{padding-top:40px;padding-bottom:10px;text-align:center}.page__ft img{height:19px}.page__ft.j_bottom{position:absolute;bottom:0;left:0;right:0}.page__title{text-align:left;font-size:20px;font-weight:400}.page__desc{margin-top:5px;color:#888;text-align:left;font-size:14px}.page.home .page__intro-icon{margin-top:-.2em;margin-left:5px;width:16px;height:16px;vertical-align:middle}.page.home .page__title{font-size:0;margin-bottom:15px}.page.home .page__bd img{width:30px;height:30px}.page.home .page__bd li{margin:10px 0;background-color:#fff;overflow:hidden;border-radius:2px;cursor:pointer}.page.home .page__bd li.js_show .weui-flex{opacity:.4}.page.home .page__bd li.js_show .page__category{height:auto}.page.home .page__bd li.js_show .page__category-content{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}.page.home .page__bd li:first-child{margin-top:0}.page.home .page__category{height:0;overflow:hidden}.page.home .page__category-content{opacity:0;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:.3s;transition:.3s}.page.home .weui-flex{padding:20px;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-transition:.3s;transition:.3s}.page.home .weui-cells{margin-top:0}.page.home .weui-cells:after,.page.home .weui-cells:before{display:none}.page.home .weui-cell{padding-left:20px;padding-right:20px}.page.home .weui-cell:before{left:20px;right:20px}.page.button .page__bd{padding:0 15px}.page.button .button-sp-area{margin:0 auto;padding:15px 0;width:60%}.page.cell .page__bd,.page.form .page__bd{padding-bottom:30px}.page.actionsheet,.page.dialog{background-color:#fff}.page.dialog .page__bd{padding:0 15px}.page.msg,.page.msg_success,.page.msg_warn,.page.toast{background-color:#fff}.page.panel .page__bd{padding-bottom:20px}.page.article{background-color:#fff}.page.icons{text-align:center}.page.icons .page__bd{padding:0 40px;text-align:left}.page.icons .icon-box{margin-bottom:25px;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.page.icons .icon-box i{margin-right:18px}.page.icons .icon-box__ctn{-webkit-flex-shrink:100;flex-shrink:100}.page.icons .icon-box__title{font-weight:400}.page.icons .icon-box__desc{margin-top:6px;font-size:12px;color:#888}.page.icons .icon_sp_area{margin-top:10px;text-align:left}.page.icons .icon_sp_area i:before{margin-bottom:5px}.page.flex .placeholder{margin:5px;padding:0 10px;background-color:#ebebeb;height:2.3em;line-height:2.3em;text-align:center;color:#cfcfcf}.page.loadmore{background-color:#fff}.page.layers{overflow-x:hidden;-webkit-perspective:1000px;perspective:1000px}@media only screen and (max-width:320px){.page.layers .page__hd{padding-left:20px;padding-right:20px}}.page.layers .page__bd{position:relative}.page.layers .page__desc{min-height:4.8em}.page.layers .layers__layer{position:absolute;left:50%;width:150px;height:266px;margin-left:-75px;box-sizing:border-box;-webkit-transition:.5s;transition:.5s;background:url(images/layers/transparent.gif) no-repeat 50%;background-size:contain;font-size:14px;color:#fff}.page.layers .layers__layer span{position:absolute;bottom:5px;left:0;right:0;text-align:center;-webkit-transition:.5s;transition:.5s}.page.layers .layers__layer:last-child span{color:#aaa}.page.layers .layers__layer.j_hide{opacity:0}.page.layers .layers__layer.j_pic span{color:transparent}@media only screen and (min-width:375px) and (min-height:603px){.page.layers .layers__layer{width:180px;height:320px;margin-left:-90px}}@media only screen and (min-width:414px) and (min-height:640px){.page.layers .layers__layer{width:200px;height:355px;margin-left:-100px}}.page.layers .layers__layer_popout{border:1px solid hsla(0,0%,80%,.5);z-index:4}.page.layers .layers__layer_popout.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(120px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(120px)}@media only screen and (max-width:320px){.page.layers .layers__layer_popout.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(140px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(140px)}}.page.layers .layers__layer_popout.j_pic{border-color:transparent;background-image:url(images/layers/popout.png)}.page.layers .layers__layer_mask{background-color:rgba(0,0,0,.5);z-index:3}.page.layers .layers__layer_mask.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(40px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(40px)}@media only screen and (max-width:320px){.page.layers .layers__layer_mask.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(80px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(80px)}}.page.layers .layers__layer_navigation{background-color:rgba(40,187,102,.5);z-index:2}.page.layers .layers__layer_navigation.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px)}@media only screen and (max-width:320px){.page.layers .layers__layer_navigation.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(20px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(20px)}}.page.layers .layers__layer_navigation.j_pic{background-color:transparent;background-image:url(images/layers/navigation.png)}.page.layers .layers__layer_content{background-color:#fff;z-index:1}.page.layers .layers__layer_content.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-120px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-120px)}@media only screen and (max-width:320px){.page.layers .layers__layer_content.j_transform{-webkit-transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px);transform:translateX(15px) rotateX(45deg) rotate(10deg) skew(-15deg) translateZ(-40px)}}.page.layers .layers__layer_content.j_pic{background-image:url(images/layers/content.png)}.page.searchbar .searchbar-result{display:none;margin-top:0;font-size:14px}.page.searchbar .searchbar-result .weui-cell__bd{padding:2px 0 2px 20px;color:#666}.page.actionsheet,.page.picker{overflow:hidden}.page.picker{background-color:#fff}.page.gallery{overflow:hidden}@-webkit-keyframes a{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes a{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@-webkit-keyframes b{0%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}}@keyframes b{0%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);opacity:0}}.page.slideIn{-webkit-animation:a .2s forwards;animation:a .2s forwards}.page.slideOut{-webkit-animation:b .2s forwards;animation:b .2s forwards}@supports (constant(safe-area-inset-top)){.page{padding:constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left)}.page.navbar,.page.tabbar{padding-left:0;padding-right:0}.weui-tab__panel{padding-left:constant(safe-area-inset-left);padding-right:constant(safe-area-inset-right)}}
\ No newline at end of file
... ...
/*第一问*/
.question_item{
margin-top: 0.7rem;
}
.question_item_wrap{
width: 5.5rem;
margin: 0 auto;
}
.question_tit{
display: flex;
}
.question_num {
display: block;
width: 0.32rem ;
height: 0.32rem;
color: #FFFFFF;
background-color: #FFCC00;
font-size: 0.26rem;
text-align: center;
font-family: Impact;
border-radius: 50%;
line-height: 0.32rem;
}
.question_tit_text{
font-size: 0.32rem;
line-height: 0.32rem;
color: #FAB701;
margin-left: 0.15rem;
}
.question_text{
font-size: 0.32rem;
color: #1A1A1A;
margin-top: 0.35rem;
display: flex;
justify-content: center;
}
.question_answer{
display: flex;
font-size: 0.28rem;
justify-content: space-around;
margin-top: 0.5rem;
}
.question_answer span{
display: block;
width: 1.46rem;
height: 0.59rem;
color: #333333;
text-align: center;
background-color: #F7F7F7;
line-height: 0.59rem;
}
.question_answer .active{
background-color: #FFCC00;
}
.question_answer_choose{
display: flex;
justify-content: center;
}
.question_answer_choose_num{
width: 2.71rem;
height: 0.64rem;
font-size: 0.3rem;
line-height: 0.64rem;
background-color: #F7F7F7;
margin: 0.45rem auto 0;
display: flex;
padding: 0 0.25rem;
display: inline-block;
text-align: justify;
flex-wrap: nowrap;
}
.question_answer_choose_num span{
display: inline-block;
height: 100%;
width: 100%;
}
.question_answer_arr{
display: flex;
flex-wrap: wrap;
margin-top: 0.5rem;
}
.question_answer_item {
font-size: 0.3rem;
background-color: #F7F7F7;
display: flex;
display: inline-block;
text-align: justify;
flex-wrap: nowrap;
height: 0.64rem;
line-height: 0.64rem;
padding: 0 0.16rem 0 0.25rem;
margin-right: 0.14rem;
color: #999999;
margin-bottom: 0.2rem;
flex-wrap: nowrap;
}
.question_answer_item{
width: 1.25rem;
}
.question_answer_item_details{
border: none;
font-size: 0.3rem;
background-color: #F7F7F7;
flex-wrap: nowrap;
height: 0.64rem;
line-height: 0.64rem;
padding: 0 0.16rem 0 0.25rem;
margin-right: 0.14rem;
color: #999999;
margin-bottom: 0.2rem;
flex-wrap: nowrap;
outline: none;
}
/*街道*/
.question_answer_street{
font-size: 0.3rem;
background-color: #F7F7F7;
display: flex;
text-align: justify;
justify-content: space-between;
flex-wrap: nowrap;
height: 0.64rem;
line-height: 0.64rem;
padding: 0 0.16rem 0 0.25rem;
margin-right: 0.14rem;
color: #999999;
margin-bottom: 0.2rem;
width: 1.25rem;
white-space: nowrap;
}
.question_answer_item_details{
width: 3.04rem;
margin: 0;
}
.question_answer_item:nth-child(3n){
margin-right: 0;
}
.question_answer_item span{
display: inline-block;
width: 100%;
}
/*第四问*/
.question_item_home{
display: flex;
line-height: 0.64rem;
}
.question_item_home_text{
font-size: 0.29rem;
color: #1A1A1A;
margin-right: 0.2rem;
white-space: nowrap;
}
.favorite_food{
display: flex;
}
.favorite_food span{
font-size: 0.3rem;
color: #1A1A1A;
line-height: 0.64rem;
}
.favorite_food input{
height: 0.64rem;
width: 2.6rem;
background-color: #F7F7F7;
border: none;
outline: none;
color: #515151;
padding-left: 0.1rem;
}
.btn{
font-size: 0.34rem;
color: #333333;
width: 2.23rem;
height: 0.72rem;
background-color: #FFCC00;
text-align: center;
line-height: 0.72rem;
border-radius: 0.36rem;
margin: 0.71rem auto 0;
font-family: Regular;
}
... ...
.container {
padding-bottom: 1rem;
font-family: PingFangSC-Regular;
position: relative;
}
.hidden {
display: none;
}
.show {
display: block;
}
/*遮罩*/
.wrap {
width: 7.5rem;
height: 100%;
background-color: rgba(0,0,0,0.5);
position: fixed;
z-index: 2;
top:36px;
}
/*到店堂食弹层*/
.eat_popup{
width: 7.5rem;
background-color: #FFFFFF;
min-height: 1rem;
position: absolute;
left: 0;
top: 0;
z-index: 4;
overflow: hidden;
}
.address_list{
padding: 0 0.4rem 1rem;
}
.address_item{
border-bottom: 1px solid #E4E4E4;
padding: 0.37rem 0 0.33rem;
display: flex;
justify-content: space-between;
}
.distance{
font-size: 0.3rem;
color: #333333;
margin-bottom: 0.32rem;
line-height: 0.3rem;
}
.distance span{
font-size: 0.28rem;
color: #FCB801;
margin-left: 0.3rem;
}
.business{
font-size: 0.28rem;
color: #666666;
margin-bottom: 0.21rem;
line-height: 0.28rem;
}
.address_item_left .iconfont{
margin-right: 0.14rem;
}
.business:last-child{
margin-bottom: 0;
}
.address_item_right{
width: 0.54rem;
height: 1.33rem;
color: #999999;
background-color: #EEEEEE;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.4rem;
}
/*弹层*/
.popup {
width: 7.5rem;
background-color: #FFFFFF;
height: 6.72rem;
position: absolute;
left: 0;
top: 0;
z-index: 4;
overflow: hidden;
}
.popup_title {
display: flex;
justify-content: space-between;
line-height: 0.92rem;
padding: 0 0.41rem 0 0.37rem;
height: 0.92rem;
}
.popup_title span {
font-size: 0.28rem;
color: #FEAD00;
}
.popup_title p {
font-size: 0.24rem;
color: #67C33E;
}
.popup_tab {
height: 5.8rem;
display: flex;
border-top: 1px solid #E4E4E4;
}
.popup_nav {
width: 2rem;
background-color: #F7F7F7;
height: 100%;
border-right: 1px solid #E4E4E4;
overflow-y: auto;
position: relative;
overflow-x: hidden;
}
.popup_nav ul li {
font-size: 0.28rem;
line-height: 0.48rem;
width: 2rem;
text-align: center;
padding: 0.16rem 0;
border-bottom: 1px solid #E4E4E4;
}
.popup_active {
border-right: 3px solid #FFFFFF;
background-color: #FFFFFF;
color: #FEAD00;
position: relative;
width: 2.03rem;
}
.popup_active:before {
content: '';
display: block;
position: absolute;
width: 0.08rem;
height: 0.8rem;
background-color: #FFCC00;
left: 0;
top: 0;
}
/*.popup_active:after{
content: '';
display: block;
position: absolute;
width: 0.08rem;
height: 0.8rem;
background-color: #FFFFFF;
right: 0;
z-index: 33;
top: 0;
}*/
/*弹层右侧*/
.popup_address {
padding-top: 0.2rem;
/*display: flex;
flex-direction: column;
align-items: center;*/
}
.popup_address_item {
display: flex;
flex-direction: column;
padding: 0.26rem 0.25rem 0.3rem 0.35rem;
border: 1px solid #E4E4E4;
width: 4.72rem;
height: 1.4rem;
margin-top: 0.24rem;
margin-left: 0.38rem;
}
.popup_address_wrap a {
color: #FEAD00;
}
.popup_address_item span {
font-size: 0.3rem;
}
.popup_address_wrap {
display: flex;
justify-content: space-between;
}
.popup_address_wrap .icon-hdxq_icon {
font-size: 0.24rem;
margin-right: 0.1rem;
}
.popup_address_wrap p:nth-child(1) {
font-size: 0.26rem;
}
.popup_address_wrap p:nth-child(2) {
font-size: 0.24rem;
display: block;
border: 1px solid #FEAD00;
color: #FEAD00;
width: 1.49rem;
height: 0.37rem;
border-radius: 19rem;
text-align: center;
line-height: 0.37rem;
}
/*头部*/
.header {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
border-bottom: 1px solid #E4E4E4;
padding: 0.55rem 0;
}
.head_tab{
width: 3.62rem;
height: 0.64rem;
border-radius: 0.32rem;
background-color: #FFFFFF;
line-height: 0.64rem;
border: 1px solid #E4E4E4;
line-height: 0.32rem;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.head_tab .active{
background-color: #FFCC00;
border-radius: 0.32rem;
height: 0.64rem;
line-height: 0.64rem;
width: 1.8rem;
z-index: 1;
position: absolute;
left: 0;
bottom: 0;
transition: 0.5s;
}
.head_tab span{
font-size: 0.3rem;
width: 1.9rem;
display: inline-block;
text-align: center;
z-index: 2;
}
.head_tab span:last-child{
margin-right: 0rem;
}
.head_add{
display: flex;
font-size: 0.26rem;
margin-top: 0.27rem;
}
.head_add .icon-hdxq_icon{
margin-right: 0.13rem;
}
/*导航列表*/
.nav_list {
display: flex;
font-size: 0.28rem;
line-height: 0.3rem;
justify-content: center;
margin-top: 0.38rem;
}
.nav_list .active {
display: inline-block;
border-bottom: 3px solid #FFCC00;
color: #FFCC00;
}
.nav_list li {
margin-right: 0.6rem;
padding-bottom: 0.16rem;
}
.nav_list li:last-child {
margin-right: 0;
}
/*swiper*/
.banner {
margin-top: 0.03rem;
}
.banner img {
width: 100%;
height: 3.48rem;
}
.swiper-pagination {
bottom: 0;
height: 1rem;
}
.swiper-pagination-bullet-active {
background: #FFCC00;
}
/*主体列表*/
.content_list {
padding: 0 0.32rem 0 0.36rem;
}
.content_item {
display: flex;
padding: 0.49rem 0;
border-bottom: 1px solid #E4E4E4;
position: relative;
}
.content_item:last-child {
border-bottom: none;
}
.content_item img {
width: 1.71rem;
height: 1.51rem;
}
/*列表右侧文字*/
.content_item_text {
display: flex;
flex-direction: column;
margin-left: 0.52rem;
width: 3.5rem;
}
.content_item_text_h {
font-size: 0.32rem;
color: #333333;
overflow: hidden;
}
.content_item_text_subh {
font-size: 0.26rem;
color: #666666;
margin-top: 0.16rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.content_item_num {
display: flex;
margin-top: 0.28rem;
align-items: baseline;
}
.content_item_num_money {
color: #C90103;
font-size: 0.36rem;
margin-right: 0.34rem;
}
.content_item_num_num {
color: #666666;
font-size: 0.24rem;
white-space: nowrap;
}
.content_item_shop_car_icon {
display: block;
position: absolute;
right: 0.32rem;
bottom: 0.48rem;
color: #FFFFFF;
background-color: #FFCC00;
width: 0.64rem;
height: 0.64rem;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
font-size: 0.35rem;
}
.choose_num{
right: 0.2rem;
display: flex;
display: none;
position: absolute;
}
.choose_num .iconfont{
font-size: 0.4rem;
}
/*footer*/
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 7.5rem;
left: 50%;
margin-left: -3.75rem;
border-top: 1px solid #CCCCCC;
background-color: #FFFFFF;
font-size: 0.22rem;
height: 1rem;
display: flex;
justify-content: space-around;
}
.footer_item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.footer_item span {
color: #999999;
}
.footer_item img {
width: 0.7rem;
height: 0.7rem;
}
.footer_active span {
color: #FEAD00;
}
/*取货地址详情*/
.add_wrap {
padding: 0.56rem 0.4rem 0;
}
.address_pic_list{
display: flex;
flex-wrap: wrap;
}
.add_wrap span {
font-size: 0.3rem;
color: #333333;
}
.add_wrap_text{
border-bottom: 1px solid #E4E4E4;
padding-bottom: 0.5rem;
}
.add_wrap img {
margin-bottom: 0.3rem;
width: 2rem;
height: 1.5rem;
margin-right: 0.22rem;
}
.add_wrap img:nth-child(3n){
margin-right: 0;
}
/*产品详情*/
.product_banner {
position: relative;
width: 100%rem;
height: 6.72rem;
}
.product_banner img {
width: 100%;
height: 100%;
}
.product_banner .icon-index {
position: absolute;
right: 0.2rem;
top: 0.2rem;
color: #FFFFFF;
display: block;
width: 0.8rem;
height: 0.8rem;
background: rgba(0, 0, 0, 0.5);
text-align: center;
line-height: 0.8rem;
border-radius: 50%;
font-size: 0.4rem;
}
.footer_wrap .icon-icon--1{
font-size: 0.5rem;
}
/*产品介绍*/
.product {
background-color: #F7F7F7;
}
.product_introduce {
background-color: #FFFFFF;
display: flex;
flex-direction: column;
padding: 0.56rem 0.32rem 0.56rem 0.4rem;
width: 100%;
position: relative;
margin-bottom: 0.16rem;
}
.product_introduce_text {
display: flex;
width: 5.3rem;
flex-direction: column;
}
.product_introduce_name {
font-size: 0.36rem;
color: #333333;
width: 5.3rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.product_introduce_subname {
font-size: 0.26rem;
color: #666666;
line-height: 0.5rem;
width: 5.3rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.product_introduce_num {
display: flex;
align-items: baseline;
}
.product_introduce_num span {
height: 0.4rem;
}
.product_introduce_num span:nth-child(1) {
font-size: 0.3rem;
color: #C90103;
}
.product_introduce_num span:nth-child(2) {
font-size: 0.4rem;
color: #C90103;
margin-left: 0.05rem;
}
.product_introduce_num span:nth-child(3) {
font-size: 0.26rem;
color: #999999;
margin-left: 0.2rem;
}
/*icon*/
.product_introduce_icon {
position: absolute;
width: 1.6rem;
right: 0;
top: 0.57rem;
height: 1.5rem;
border-left: 1px solid #E4E4E4;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.product_introduce_icon .icon-31daipingjia {
font-size: 0.5rem;
color: #999999;
}
.product_introduce_icon span {
font-size: 0.22rem;
color: #333333;
}
/*商品详情*/
.product_details {
background-color: #FFFFFF;
padding: 0.38rem 0.59rem 0.59rem 0.59rem;
}
.product_details_h {
font-size: 0.26rem;
color: #111111;
text-align: center;
margin-bottom: 0.37rem;
}
.product_details_pic {
margin-bottom: 0.43rem;
}
.product_details_pic img {
width: 6.28rem;
height: 4.5rem;
margin-right: 0.26rem;
margin-top: 0.26rem;
}
.product_details_pic img:last-child {
margin-right: 0;
}
.product_details p {
font-size: 0.24rem;
color: #666666;
font-weight: Light;
line-height: 0.4rem;
}
/*footer*/
.footer_wrap {
display: flex;
position: fixed;
left: 0;
bottom: 0;
z-index: 2;
left: 50%;
width: 7.5rem;
margin-left: -3.75rem;
}
.shop_car_icon {
width: 1.54rem;
height: 1rem;
text-align: center;
color: #666666;
background-color: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.shop_car_icon p {
position: absolute;
display: block;
font-size: 0.24rem;
color: #FFFFFF;
background-color: #C90103;
width: 0.28rem;
height: 0.28rem;
border-radius: 50%;
left: 0.89rem;
top: 0.15rem;
}
.choose_num_control{
display: flex;
align-items: center;
}
.num_reduce ,.num_add{
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.3rem;
text-align: center;
line-height: 0.42rem;
}
.num_reduce {
border: 1px solid #CCCCCC;
color: #CCCCCC;
width: 0.4rem;
height: 0.4rem;
}
.num_add{
background-color: #FFCC00;
color: #FFFFFF;
width: 0.42rem;
height: 0.42rem;
}
.product_introduce_footer {
width: 5.97rem;
height: 1rem;
text-align: center;
line-height: 1rem;
font-size: 0.31rem;
color: #333333;
background-color: #FFCC00;
}
\ No newline at end of file
... ...
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
blockquote,
dl,
dt,
dd,
ul,
ol,
li,
pre,
form,
fieldset,
legend,
button,
input,
textarea,
th,
td {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
margin: 0;
padding: 0;
font-family: PingFang-SC-Medium;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
-webkit-appearance: none;
}
a {
text-decoration: none;
outline: none;
color: white;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html,
body {
position: relative;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background-color: RGBA(245, 246, 250, 1);
}
img {
display: block;
width: 100%;
height: 100%;
}
div {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
box-sizing: border-box;
}
li {
list-style: none;
}
li img {
display: block;
width: 100%;
height: 100%;
}
input[type="button"],
input[type="submit"],
input[type="reset"] {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
-webkit-appearance: none;
outline: none !important;
}
textarea {
-webkit-appearance: none;
outline: none !important;
}
.nomore{
width: 3rem;
height: 3rem;
margin: 0 auto;
margin-top: 3rem;
}
.nomore_font{
font-size:0.26rem;
font-family:PingFang-SC-Medium;
color:RGBA(102, 102, 102, 1);
line-height:0.7rem;
text-align: center;
}
span{
margin: 0rem;
padding: 0rem;
}
.container{
width: 7.5rem;
height: 100%;
margin: 0 auto;
box-sizing: border-box;
overflow-y: scroll;
background-color: #FFFFFF;
}
.foot_cartnum{
position: absolute;
width: 0.36rem;
height: 0.36rem;
background-color: #FF4800;
right: 3.3rem;
top: 0rem;
border-radius: 50%;
color: #FFFFFF;
font-size: 0.2rem;
text-align: center;
line-height: 0.36rem;
}
[v-cloak]{
display: none;
}
... ...
/**
* jQuery WeUI V1.2.1
* By 言川
* http://lihongxun945.github.io/jquery-weui/
*/
.preloader {
width: 20px;
height: 20px;
-webkit-transform-origin: 50%;
transform-origin: 50%;
-webkit-animation: preloader-spin 1s steps(12, end) infinite;
animation: preloader-spin 1s steps(12, end) infinite;
}
.preloader:after {
display: block;
width: 100%;
height: 100%;
content: "";
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
background-repeat: no-repeat;
background-position: 50%;
background-size: 100%;
}
@-webkit-keyframes preloader-spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes preloader-spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/*
.hairline(@position, @color) when (@position = top) {
border-top: 1px solid @color;
}
.hairline(@position, @color) when (@position = left) {
border-left: 1px solid @color;
}
.hairline(@position, @color) when (@position = bottom) {
border-bottom: 1px solid @color;
}
.hairline(@position, @color) when (@position = right) {
border-right: 1px solid @color;
}
// For right and bottom
.hairline-remove(@position) when not (@position = left) and not (@position = top) {
border-left: 0;
border-bottom: 0;
}
// For left and top
.hairline-remove(@position) when not (@position = right) and not (@position = bottom) {
border-right: 0;
border-top: 0;
}
// For right and bottom
.hairline-color(@position, @color) when not (@position = left) and not (@position = top) {
border-right-color: @color;
border-bottom-color: @color;
}
// For left and top
.hairline-color(@position, @color) when not (@position = right) and not (@position = bottom) {
border-left-color: @color;
border-top-color: @color;
}
*/
label > * {
pointer-events: none;
}
html {
font-size: 20px;
}
body {
font-size: 16px;
}
@media only screen and (min-width: 400px) {
html {
font-size: 21.33333333px !important;
}
}
@media only screen and (min-width: 414px) {
html {
font-size: 22.08px !important;
}
}
@media only screen and (min-width: 480px) {
html {
font-size: 25.6px !important;
}
}
.weui_navbar {
z-index: 10;
}
.weui-popup-overlay,
.weui-popup-container {
z-index: 1000;
}
.weui-mask {
z-index: 1000;
}
/* === Grid === */
.weui-row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.weui-row > [class*="col-"] {
box-sizing: border-box;
}
.weui-row .col-auto {
width: 100%;
}
.weui-row .weui-col-100 {
width: 100%;
width: calc((100% - 15px*0) / 1);
}
.weui-row.weui-no-gutter .weui-col-100 {
width: 100%;
}
.weui-row .weui-col-95 {
width: 95%;
width: calc((100% - 15px*0.05263157894736836) / 1.0526315789473684);
}
.weui-row.weui-no-gutter .weui-col-95 {
width: 95%;
}
.weui-row .weui-col-90 {
width: 90%;
width: calc((100% - 15px*0.11111111111111116) / 1.1111111111111112);
}
.weui-row.weui-no-gutter .weui-col-90 {
width: 90%;
}
.weui-row .weui-col-85 {
width: 85%;
width: calc((100% - 15px*0.17647058823529416) / 1.1764705882352942);
}
.weui-row.weui-no-gutter .weui-col-85 {
width: 85%;
}
.weui-row .weui-col-80 {
width: 80%;
width: calc((100% - 15px*0.25) / 1.25);
}
.weui-row.weui-no-gutter .weui-col-80 {
width: 80%;
}
.weui-row .weui-col-75 {
width: 75%;
width: calc((100% - 15px*0.33333333333333326) / 1.3333333333333333);
}
.weui-row.weui-no-gutter .weui-col-75 {
width: 75%;
}
.weui-row .weui-col-66 {
width: 66.66666666666666%;
width: calc((100% - 15px*0.5000000000000002) / 1.5000000000000002);
}
.weui-row.weui-no-gutter .weui-col-66 {
width: 66.66666666666666%;
}
.weui-row .weui-col-60 {
width: 60%;
width: calc((100% - 15px*0.6666666666666667) / 1.6666666666666667);
}
.weui-row.weui-no-gutter .weui-col-60 {
width: 60%;
}
.weui-row .weui-col-50 {
width: 50%;
width: calc((100% - 15px*1) / 2);
}
.weui-row.weui-no-gutter .weui-col-50 {
width: 50%;
}
.weui-row .weui-col-40 {
width: 40%;
width: calc((100% - 15px*1.5) / 2.5);
}
.weui-row.weui-no-gutter .weui-col-40 {
width: 40%;
}
.weui-row .weui-col-33 {
width: 33.333333333333336%;
width: calc((100% - 15px*2) / 3);
}
.weui-row.weui-no-gutter .weui-col-33 {
width: 33.333333333333336%;
}
.weui-row .weui-col-25 {
width: 25%;
width: calc((100% - 15px*3) / 4);
}
.weui-row.weui-no-gutter .weui-col-25 {
width: 25%;
}
.weui-row .weui-col-20 {
width: 20%;
width: calc((100% - 15px*4) / 5);
}
.weui-row.weui-no-gutter .weui-col-20 {
width: 20%;
}
.weui-row .weui-col-15 {
width: 15%;
width: calc((100% - 15px*5.666666666666667) / 6.666666666666667);
}
.weui-row.weui-no-gutter .weui-col-15 {
width: 15%;
}
.weui-row .weui-col-10 {
width: 10%;
width: calc((100% - 15px*9) / 10);
}
.weui-row.weui-no-gutter .weui-col-10 {
width: 10%;
}
.weui-row .weui-col-5 {
width: 5%;
width: calc((100% - 15px*19) / 20);
}
.weui-row.weui-no-gutter .weui-col-5 {
width: 5%;
}
.weui-row .weui-col-auto:nth-last-child(1),
.weui-row .weui-col-auto:nth-last-child(1) ~ .weui-col-auto {
width: 100%;
width: calc((100% - 15px*0) / 1);
}
.weui-row.weui-no-gutter .weui-col-auto:nth-last-child(1),
.weui-row.weui-no-gutter .weui-col-auto:nth-last-child(1) ~ .weui-col-auto {
width: 100%;
}
.weui-row .weui-col-auto:nth-last-child(2),
.weui-row .weui-col-auto:nth-last-child(2) ~ .weui-col-auto {
width: 50%;
width: calc((100% - 15px*1) / 2);
}
.weui-row.weui-no-gutter .weui-col-auto:nth-last-child(2),
.weui-row.weui-no-gutter .weui-col-auto:nth-last-child(2) ~ .weui-col-auto {
width: 50%;
}
.weui-row .weui-col-auto:nth-last-child(3),
.weui-row .weui-col-auto:nth-last-child(3) ~ .weui-col-auto {
width: 33.33333333%;
width: calc((100% - 15px*2) / 3);
}
.weui-row.weui-no-gutter .weui-col-auto:nth-last-child(3),
.weui-row.weui-no-gutter .weui-col-auto:nth-last-child(3) ~ .weui-col-auto {
width: 33.33333333%;
}
.weui-row .weui-col-auto:nth-last-child(4),
.weui-row .weui-col-auto:nth-last-child(4) ~ .weui-col-auto {
width: 25%;
width: calc((100% - 15px*3) / 4);
}
.weui-row.weui-no-gutter .weui-col-auto:nth-last-child(4),
.weui-row.weui-no-gutter .weui-col-auto:nth-last-child(4) ~ .weui-col-auto {
width: 25%;
}
.weui-row .weui-col-auto:nth-last-child(5),
.weui-row .weui-col-auto:nth-last-child(5) ~ .weui-col-auto {
width: 20%;
width: calc((100% - 15px*4) / 5);
}
.weui-row.weui-no-gutter .weui-col-auto:nth-last-child(5),
.weui-row.weui-no-gutter .weui-col-auto:nth-last-child(5) ~ .weui-col-auto {
width: 20%;
}
.weui-row .weui-col-auto:nth-last-child(6),
.weui-row .weui-col-auto:nth-last-child(6) ~ .weui-col-auto {
width: 16.66666667%;
width: calc((100% - 15px*5) / 6);
}
.weui-row.weui-no-gutter .weui-col-auto:nth-last-child(6),
.weui-row.weui-no-gutter .weui-col-auto:nth-last-child(6) ~ .weui-col-auto {
width: 16.66666667%;
}
.weui-row .weui-col-auto:nth-last-child(7),
.weui-row .weui-col-auto:nth-last-child(7) ~ .weui-col-auto {
width: 14.28571429%;
width: calc((100% - 15px*6) / 7);
}
.weui-row.weui-no-gutter .weui-col-auto:nth-last-child(7),
.weui-row.weui-no-gutter .weui-col-auto:nth-last-child(7) ~ .weui-col-auto {
width: 14.28571429%;
}
.weui-row .weui-col-auto:nth-last-child(8),
.weui-row .weui-col-auto:nth-last-child(8) ~ .weui-col-auto {
width: 12.5%;
width: calc((100% - 15px*7) / 8);
}
.weui-row.weui-no-gutter .weui-col-auto:nth-last-child(8),
.weui-row.weui-no-gutter .weui-col-auto:nth-last-child(8) ~ .weui-col-auto {
width: 12.5%;
}
.weui-row .weui-col-auto:nth-last-child(9),
.weui-row .weui-col-auto:nth-last-child(9) ~ .weui-col-auto {
width: 11.11111111%;
width: calc((100% - 15px*8) / 9);
}
.weui-row.weui-no-gutter .weui-col-auto:nth-last-child(9),
.weui-row.weui-no-gutter .weui-col-auto:nth-last-child(9) ~ .weui-col-auto {
width: 11.11111111%;
}
.weui-row .weui-col-auto:nth-last-child(10),
.weui-row .weui-col-auto:nth-last-child(10) ~ .weui-col-auto {
width: 10%;
width: calc((100% - 15px*9) / 10);
}
.weui-row.weui-no-gutter .weui-col-auto:nth-last-child(10),
.weui-row.weui-no-gutter .weui-col-auto:nth-last-child(10) ~ .weui-col-auto {
width: 10%;
}
.weui-row .weui-col-auto:nth-last-child(11),
.weui-row .weui-col-auto:nth-last-child(11) ~ .weui-col-auto {
width: 9.09090909%;
width: calc((100% - 15px*10) / 11);
}
.weui-row.weui-no-gutter .weui-col-auto:nth-last-child(11),
.weui-row.weui-no-gutter .weui-col-auto:nth-last-child(11) ~ .weui-col-auto {
width: 9.09090909%;
}
.weui-row .weui-col-auto:nth-last-child(12),
.weui-row .weui-col-auto:nth-last-child(12) ~ .weui-col-auto {
width: 8.33333333%;
width: calc((100% - 15px*11) / 12);
}
.weui-row.weui-no-gutter .weui-col-auto:nth-last-child(12),
.weui-row.weui-no-gutter .weui-col-auto:nth-last-child(12) ~ .weui-col-auto {
width: 8.33333333%;
}
.weui-row .weui-col-auto:nth-last-child(13),
.weui-row .weui-col-auto:nth-last-child(13) ~ .weui-col-auto {
width: 7.69230769%;
width: calc((100% - 15px*12) / 13);
}
.weui-row.weui-no-gutter .weui-col-auto:nth-last-child(13),
.weui-row.weui-no-gutter .weui-col-auto:nth-last-child(13) ~ .weui-col-auto {
width: 7.69230769%;
}
.weui-row .weui-col-auto:nth-last-child(14),
.weui-row .weui-col-auto:nth-last-child(14) ~ .weui-col-auto {
width: 7.14285714%;
width: calc((100% - 15px*13) / 14);
}
.weui-row.weui-no-gutter .weui-col-auto:nth-last-child(14),
.weui-row.weui-no-gutter .weui-col-auto:nth-last-child(14) ~ .weui-col-auto {
width: 7.14285714%;
}
.weui-row .weui-col-auto:nth-last-child(15),
.weui-row .weui-col-auto:nth-last-child(15) ~ .weui-col-auto {
width: 6.66666667%;
width: calc((100% - 15px*14) / 15);
}
.weui-row.weui-no-gutter .weui-col-auto:nth-last-child(15),
.weui-row.weui-no-gutter .weui-col-auto:nth-last-child(15) ~ .weui-col-auto {
width: 6.66666667%;
}
@media all and (min-width: 768px) {
.row .tablet-100 {
width: 100%;
width: calc((100% - 15px*0) / 1);
}
.row.no-gutter .tablet-100 {
width: 100%;
}
.row .tablet-95 {
width: 95%;
width: calc((100% - 15px*0.05263157894736836) / 1.0526315789473684);
}
.row.no-gutter .tablet-95 {
width: 95%;
}
.row .tablet-90 {
width: 90%;
width: calc((100% - 15px*0.11111111111111116) / 1.1111111111111112);
}
.row.no-gutter .tablet-90 {
width: 90%;
}
.row .tablet-85 {
width: 85%;
width: calc((100% - 15px*0.17647058823529416) / 1.1764705882352942);
}
.row.no-gutter .tablet-85 {
width: 85%;
}
.row .tablet-80 {
width: 80%;
width: calc((100% - 15px*0.25) / 1.25);
}
.row.no-gutter .tablet-80 {
width: 80%;
}
.row .tablet-75 {
width: 75%;
width: calc((100% - 15px*0.33333333333333326) / 1.3333333333333333);
}
.row.no-gutter .tablet-75 {
width: 75%;
}
.row .tablet-66 {
width: 66.66666666666666%;
width: calc((100% - 15px*0.5000000000000002) / 1.5000000000000002);
}
.row.no-gutter .tablet-66 {
width: 66.66666666666666%;
}
.row .tablet-60 {
width: 60%;
width: calc((100% - 15px*0.6666666666666667) / 1.6666666666666667);
}
.row.no-gutter .tablet-60 {
width: 60%;
}
.row .tablet-50 {
width: 50%;
width: calc((100% - 15px*1) / 2);
}
.row.no-gutter .tablet-50 {
width: 50%;
}
.row .tablet-40 {
width: 40%;
width: calc((100% - 15px*1.5) / 2.5);
}
.row.no-gutter .tablet-40 {
width: 40%;
}
.row .tablet-33 {
width: 33.333333333333336%;
width: calc((100% - 15px*2) / 3);
}
.row.no-gutter .tablet-33 {
width: 33.333333333333336%;
}
.row .tablet-25 {
width: 25%;
width: calc((100% - 15px*3) / 4);
}
.row.no-gutter .tablet-25 {
width: 25%;
}
.row .tablet-20 {
width: 20%;
width: calc((100% - 15px*4) / 5);
}
.row.no-gutter .tablet-20 {
width: 20%;
}
.row .tablet-15 {
width: 15%;
width: calc((100% - 15px*5.666666666666667) / 6.666666666666667);
}
.row.no-gutter .tablet-15 {
width: 15%;
}
.row .tablet-10 {
width: 10%;
width: calc((100% - 15px*9) / 10);
}
.row.no-gutter .tablet-10 {
width: 10%;
}
.row .tablet-5 {
width: 5%;
width: calc((100% - 15px*19) / 20);
}
.row.no-gutter .tablet-5 {
width: 5%;
}
.row .tablet-auto:nth-last-child(1),
.row .tablet-auto:nth-last-child(1) ~ .col-auto {
width: 100%;
width: calc((100% - 15px*0) / 1);
}
.row.no-gutter .tablet-auto:nth-last-child(1),
.row.no-gutter .tablet-auto:nth-last-child(1) ~ .tablet-auto {
width: 100%;
}
.row .tablet-auto:nth-last-child(2),
.row .tablet-auto:nth-last-child(2) ~ .col-auto {
width: 50%;
width: calc((100% - 15px*1) / 2);
}
.row.no-gutter .tablet-auto:nth-last-child(2),
.row.no-gutter .tablet-auto:nth-last-child(2) ~ .tablet-auto {
width: 50%;
}
.row .tablet-auto:nth-last-child(3),
.row .tablet-auto:nth-last-child(3) ~ .col-auto {
width: 33.33333333%;
width: calc((100% - 15px*2) / 3);
}
.row.no-gutter .tablet-auto:nth-last-child(3),
.row.no-gutter .tablet-auto:nth-last-child(3) ~ .tablet-auto {
width: 33.33333333%;
}
.row .tablet-auto:nth-last-child(4),
.row .tablet-auto:nth-last-child(4) ~ .col-auto {
width: 25%;
width: calc((100% - 15px*3) / 4);
}
.row.no-gutter .tablet-auto:nth-last-child(4),
.row.no-gutter .tablet-auto:nth-last-child(4) ~ .tablet-auto {
width: 25%;
}
.row .tablet-auto:nth-last-child(5),
.row .tablet-auto:nth-last-child(5) ~ .col-auto {
width: 20%;
width: calc((100% - 15px*4) / 5);
}
.row.no-gutter .tablet-auto:nth-last-child(5),
.row.no-gutter .tablet-auto:nth-last-child(5) ~ .tablet-auto {
width: 20%;
}
.row .tablet-auto:nth-last-child(6),
.row .tablet-auto:nth-last-child(6) ~ .col-auto {
width: 16.66666667%;
width: calc((100% - 15px*5) / 6);
}
.row.no-gutter .tablet-auto:nth-last-child(6),
.row.no-gutter .tablet-auto:nth-last-child(6) ~ .tablet-auto {
width: 16.66666667%;
}
.row .tablet-auto:nth-last-child(7),
.row .tablet-auto:nth-last-child(7) ~ .col-auto {
width: 14.28571429%;
width: calc((100% - 15px*6) / 7);
}
.row.no-gutter .tablet-auto:nth-last-child(7),
.row.no-gutter .tablet-auto:nth-last-child(7) ~ .tablet-auto {
width: 14.28571429%;
}
.row .tablet-auto:nth-last-child(8),
.row .tablet-auto:nth-last-child(8) ~ .col-auto {
width: 12.5%;
width: calc((100% - 15px*7) / 8);
}
.row.no-gutter .tablet-auto:nth-last-child(8),
.row.no-gutter .tablet-auto:nth-last-child(8) ~ .tablet-auto {
width: 12.5%;
}
.row .tablet-auto:nth-last-child(9),
.row .tablet-auto:nth-last-child(9) ~ .col-auto {
width: 11.11111111%;
width: calc((100% - 15px*8) / 9);
}
.row.no-gutter .tablet-auto:nth-last-child(9),
.row.no-gutter .tablet-auto:nth-last-child(9) ~ .tablet-auto {
width: 11.11111111%;
}
.row .tablet-auto:nth-last-child(10),
.row .tablet-auto:nth-last-child(10) ~ .col-auto {
width: 10%;
width: calc((100% - 15px*9) / 10);
}
.row.no-gutter .tablet-auto:nth-last-child(10),
.row.no-gutter .tablet-auto:nth-last-child(10) ~ .tablet-auto {
width: 10%;
}
.row .tablet-auto:nth-last-child(11),
.row .tablet-auto:nth-last-child(11) ~ .col-auto {
width: 9.09090909%;
width: calc((100% - 15px*10) / 11);
}
.row.no-gutter .tablet-auto:nth-last-child(11),
.row.no-gutter .tablet-auto:nth-last-child(11) ~ .tablet-auto {
width: 9.09090909%;
}
.row .tablet-auto:nth-last-child(12),
.row .tablet-auto:nth-last-child(12) ~ .col-auto {
width: 8.33333333%;
width: calc((100% - 15px*11) / 12);
}
.row.no-gutter .tablet-auto:nth-last-child(12),
.row.no-gutter .tablet-auto:nth-last-child(12) ~ .tablet-auto {
width: 8.33333333%;
}
.row .tablet-auto:nth-last-child(13),
.row .tablet-auto:nth-last-child(13) ~ .col-auto {
width: 7.69230769%;
width: calc((100% - 15px*12) / 13);
}
.row.no-gutter .tablet-auto:nth-last-child(13),
.row.no-gutter .tablet-auto:nth-last-child(13) ~ .tablet-auto {
width: 7.69230769%;
}
.row .tablet-auto:nth-last-child(14),
.row .tablet-auto:nth-last-child(14) ~ .col-auto {
width: 7.14285714%;
width: calc((100% - 15px*13) / 14);
}
.row.no-gutter .tablet-auto:nth-last-child(14),
.row.no-gutter .tablet-auto:nth-last-child(14) ~ .tablet-auto {
width: 7.14285714%;
}
.row .tablet-auto:nth-last-child(15),
.row .tablet-auto:nth-last-child(15) ~ .col-auto {
width: 6.66666667%;
width: calc((100% - 15px*14) / 15);
}
.row.no-gutter .tablet-auto:nth-last-child(15),
.row.no-gutter .tablet-auto:nth-last-child(15) ~ .tablet-auto {
width: 6.66666667%;
}
}
.weui-cell__hd img {
display: block;
margin-right: 5px;
}
.weui-cell_swiped .weui-cell__bd {
-webkit-transition: -webkit-transform .3s;
transition: -webkit-transform .3s;
transition: transform .3s;
transition: transform .3s, -webkit-transform .3s;
}
.swipeout-touching .weui-cell__bd {
-webkit-transition: none;
transition: none;
}
.weui-dialog,
.weui-toast {
-webkit-transition-duration: .2s;
transition-duration: .2s;
opacity: 0;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
visibility: hidden;
margin: 0;
top: 45%;
z-index: 2000;
}
.weui-dialog .weui-dialog__btn.default,
.weui-toast .weui-dialog__btn.default {
color: #5f646e;
}
.weui-dialog .weui-dialog__btn + .weui-dialog__btn,
.weui-toast .weui-dialog__btn + .weui-dialog__btn {
position: relative;
}
.weui-dialog .weui-dialog__btn + .weui-dialog__btn:after,
.weui-toast .weui-dialog__btn + .weui-dialog__btn:after {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 1px;
height: 100%;
border-left: 1px solid #D5D5D6;
color: #D5D5D6;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleX(0.5);
transform: scaleX(0.5);
}
.weui-dialog.weui-dialog--visible,
.weui-toast.weui-dialog--visible,
.weui-dialog.weui-toast--visible,
.weui-toast.weui-toast--visible {
opacity: 1;
visibility: visible;
}
.weui-toast_forbidden {
color: #F76260;
}
.weui-toast_cancel .weui-icon-toast:before {
content: "\EA0D";
}
.weui-toast_forbidden .weui-icon-toast:before {
content: "\EA0B";
color: #F76260;
}
.weui-toast_text {
min-height: 1em;
width: auto;
height: 45px;
border-radius: 25px;
margin-left: 0;
-webkit-transform: scale(0.9) translate3d(-50%, 0, 0);
transform: scale(0.9) translate3d(-50%, 0, 0);
-webkit-transform-origin: left;
transform-origin: left;
}
.weui-toast_text.weui-toast--visible {
-webkit-transform: scale(1) translate3d(-50%, 0, 0);
transform: scale(1) translate3d(-50%, 0, 0);
}
.weui-toast_text .weui-icon-toast {
display: none;
}
.weui-toast_text .weui-toast_content {
margin: 10px 15px;
}
.weui-mask {
opacity: 0;
-webkit-transition-duration: .3s;
transition-duration: .3s;
visibility: hidden;
}
.weui-mask.weui-mask--visible {
opacity: 1;
visibility: visible;
}
.weui-prompt-input {
padding: 4px 6px;
border: 1px solid #ccc;
box-sizing: border-box;
height: 2em;
width: 80%;
margin-top: 10px;
}
.weui-pull-to-refresh {
margin-top: -50px;
-webkit-transition: -webkit-transform .4s;
transition: -webkit-transform .4s;
transition: transform .4s;
transition: transform .4s, -webkit-transform .4s;
}
.weui-pull-to-refresh.refreshing {
-webkit-transform: translate3d(0, 50px, 0);
transform: translate3d(0, 50px, 0);
}
.weui-pull-to-refresh.touching {
-webkit-transition-duration: 0s;
transition-duration: 0s;
}
.weui-pull-to-refresh__layer {
height: 30px;
line-height: 30px;
padding: 10px;
text-align: center;
}
.weui-pull-to-refresh__layer .down {
display: inline-block;
}
.weui-pull-to-refresh__layer .up,
.weui-pull-to-refresh__layer .refresh {
display: none;
}
.weui-pull-to-refresh__layer .weui-pull-to-refresh__arrow {
display: inline-block;
z-index: 10;
width: 20px;
height: 20px;
margin-right: 4px;
vertical-align: -4px;
background: no-repeat center;
background-size: 13px 20px;
-webkit-transition-duration: 300ms;
transition-duration: 300ms;
-webkit-transform: rotate(0deg) translate3d(0, 0, 0);
transform: rotate(0deg) translate3d(0, 0, 0);
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2026%2040'%3E%3Cpolygon%20points%3D'9%2C22%209%2C0%2017%2C0%2017%2C22%2026%2C22%2013.5%2C40%200%2C22'%20fill%3D'%238c8c8c'%2F%3E%3C%2Fsvg%3E");
}
.weui-pull-to-refresh__layer .weui-pull-to-refresh__preloader {
display: none;
vertical-align: -4px;
margin-right: 4px;
width: 20px;
height: 20px;
-webkit-transform-origin: 50%;
transform-origin: 50%;
-webkit-animation: preloader-spin 1s steps(12, end) infinite;
animation: preloader-spin 1s steps(12, end) infinite;
}
.weui-pull-to-refresh__layer .weui-pull-to-refresh__preloader:after {
display: block;
width: 100%;
height: 100%;
content: "";
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
background-repeat: no-repeat;
background-position: 50%;
background-size: 100%;
}
.pull-up .weui-pull-to-refresh__layer .down,
.refreshing .weui-pull-to-refresh__layer .down {
display: none;
}
.pull-up .weui-pull-to-refresh__layer .weui-pull-to-refresh__arrow {
display: inline-block;
-webkit-transform: rotate(180deg) translate3d(0, 0, 0);
transform: rotate(180deg) translate3d(0, 0, 0);
}
.pull-up .weui-pull-to-refresh__layer .up {
display: inline-block;
}
.pull-down .weui-pull-to-refresh__layer .weui-pull-to-refresh__arrow {
display: inline-block;
}
.pull-down .weui-pull-to-refresh__layer .down {
display: inline-block;
}
.refreshing .weui-pull-to-refresh__layer .weui-pull-to-refresh__arrow {
display: none;
}
.refreshing .weui-pull-to-refresh__layer .weui-pull-to-refresh__preloader {
display: inline-block;
}
.refreshing .weui-pull-to-refresh__layer .refresh {
display: inline-block;
}
@keyframes preloader-spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.weui-tab__bd-item.weui-pull-to-refresh {
position: absolute;
top: 50px;
}
.weui-tabbar__item {
position: relative;
}
.weui-tabbar__item.weui-bar__item--on .weui-tabbar__label {
color: #04BE02;
}
.weui-navbar__item {
color: #888;
}
.weui-navbar__item.weui-bar__item--on {
color: #666;
background-color: #f1f1f1;
}
.weui-tab__bd {
box-sizing: border-box;
height: 100%;
}
.weui-tab__bd .weui-tab__bd-item {
display: none;
height: 100%;
overflow: auto;
}
.weui-tab__bd .weui-tab__bd-item.weui-tab__bd-item--active {
display: block;
}
.weui-navbar + .weui-tab__bd {
padding-top: 50px;
}
.toolbar {
position: relative;
width: 100%;
font-size: .85rem;
line-height: 1.5;
color: #3d4145;
background: #f7f7f8;
}
.toolbar:before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: auto;
right: auto;
height: 1px;
width: 100%;
background-color: #d9d9d9;
display: block;
z-index: 15;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.toolbar:before {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
.toolbar:before {
-webkit-transform: scaleY(0.33);
transform: scaleY(0.33);
}
}
.toolbar .toolbar-inner {
height: 2.2rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
text-align: center;
}
.toolbar .title {
position: absolute;
display: block;
width: 100%;
padding: 0;
font-size: .85rem;
font-weight: normal;
line-height: 2.2rem;
color: #3d4145;
text-align: center;
white-space: nowrap;
}
.toolbar .picker-button {
position: absolute;
right: 0;
box-sizing: border-box;
height: 2.2rem;
line-height: 2.2rem;
color: #04BE02;
z-index: 1;
padding: 0 .5rem;
}
/* === Columns Picker === */
.weui-picker-modal {
width: 100%;
position: absolute;
bottom: 0;
text-align: center;
border-radius: 0;
opacity: 0.6;
color: #3d4145;
-webkit-transition-duration: .3s;
transition-duration: .3s;
height: 13rem;
background: #EFEFF4;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
-webkit-transition-property: opacity, -webkit-transform;
transition-property: opacity, -webkit-transform;
transition-property: transform, opacity;
transition-property: transform, opacity, -webkit-transform;
}
.weui-picker-modal.picker-modal-inline {
height: 10.8rem;
opacity: 1;
position: static;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.weui-picker-modal.picker-modal-inline .toolbar {
display: none;
}
.weui-picker-modal.picker-columns-single .picker-items-col {
width: 100%;
}
.weui-picker-modal.weui-picker-modal-visible {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.weui-picker-modal .picker-modal-inner {
position: relative;
height: 10.8rem;
}
.weui-picker-modal .picker-columns {
width: 100%;
height: 13rem;
z-index: 11500;
}
.weui-picker-modal .picker-columns.picker-modal-inline,
.popover .weui-picker-modal .picker-columns {
height: 10rem;
}
@media (orientation: landscape) and (max-height: 415px) {
.weui-picker-modal .picker-columns:not(.picker-modal-inline) {
height: 10rem;
}
}
.weui-picker-modal .popover.popover-picker-columns {
width: 14rem;
}
.weui-picker-modal .picker-items {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
padding: 0;
text-align: right;
font-size: 1rem;
font-weight: normal;
-webkit-mask-box-image: -webkit-linear-gradient(bottom, transparent, transparent 5%, white 20%, white 80%, transparent 95%, transparent);
-webkit-mask-box-image: linear-gradient(to top, transparent, transparent 5%, white 20%, white 80%, transparent 95%, transparent);
}
.weui-picker-modal .bar + .picker-items {
height: 10.8rem;
}
.weui-picker-modal .picker-items-col {
overflow: hidden;
position: relative;
max-height: 100%;
}
.weui-picker-modal .picker-items-col.picker-items-col-left {
text-align: left;
}
.weui-picker-modal .picker-items-col.picker-items-col-center {
text-align: center;
}
.weui-picker-modal .picker-items-col.picker-items-col-right {
text-align: right;
}
.weui-picker-modal .picker-items-col.picker-items-col-divider {
color: #3d4145;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.weui-picker-modal .picker-items-col-wrapper {
-webkit-transition: 300ms;
transition: 300ms;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.weui-picker-modal .picker-item {
height: 32px;
line-height: 32px;
padding: 0 10px;
white-space: nowrap;
position: relative;
overflow: hidden;
text-overflow: ellipsis;
color: #9b9b9b;
left: 0;
top: 0;
width: 100%;
box-sizing: border-box;
-webkit-transition: 300ms;
transition: 300ms;
}
.picker-items-col-absolute .weui-picker-modal .picker-item {
position: absolute;
}
.weui-picker-modal .picker-item.picker-item-far {
pointer-events: none;
}
.weui-picker-modal .picker-item.picker-selected {
color: #3d4145;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.weui-picker-modal .picker-center-highlight {
height: 32px;
box-sizing: border-box;
position: absolute;
left: 0;
width: 100%;
top: 50%;
margin-top: -16px;
pointer-events: none;
}
.weui-picker-modal .picker-center-highlight:before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: auto;
right: auto;
height: 1px;
width: 100%;
background-color: #D9D9D9;
display: block;
z-index: 15;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.weui-picker-modal .picker-center-highlight:before {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
.weui-picker-modal .picker-center-highlight:before {
-webkit-transform: scaleY(0.33);
transform: scaleY(0.33);
}
}
.weui-picker-modal .picker-center-highlight:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
right: auto;
top: auto;
height: 1px;
width: 100%;
background-color: #D9D9D9;
display: block;
z-index: 15;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.weui-picker-modal .picker-center-highlight:after {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
.weui-picker-modal .picker-center-highlight:after {
-webkit-transform: scaleY(0.33);
transform: scaleY(0.33);
}
}
.weui-picker-modal .picker-3d .picker-items {
overflow: hidden;
-webkit-perspective: 1200px;
perspective: 1200px;
}
.weui-picker-modal .picker-3d .picker-items-col,
.weui-picker-modal .picker-3d .picker-items-col-wrapper,
.weui-picker-modal .picker-3d .picker-item {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.weui-picker-modal .picker-3d .picker-items-col {
overflow: visible;
}
.weui-picker-modal .picker-3d .picker-item {
-webkit-transform-origin: center center -110px;
transform-origin: center center -110px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.weui-picker-overlay,
.weui-picker-container {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 0;
width: 100%;
z-index: 1000;
}
.city-picker .picker-items-col {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
max-width: 7rem;
}
.weui-picker-container .weui-cells {
margin: 0;
text-align: left;
}
.datetime-picker .picker-item {
text-overflow: initial;
}
.weui-select-modal {
height: auto;
}
.weui-select-modal .weui-cells {
margin: 0;
text-align: left;
overflow-y: auto;
overflow-x: hidden;
max-height: 16rem;
}
.weui-select-modal .weui-cells:after {
display: none;
}
/* === Calendar === */
.weui-picker-calendar {
background: #fff;
height: 15rem;
width: 100%;
overflow: hidden;
}
.weui-picker-calendar .picker-modal-inner {
overflow: hidden;
height: 12.8rem;
}
.picker-calendar-week-days {
height: .9rem;
background: #f7f7f8;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-size: 11px;
box-sizing: border-box;
position: relative;
}
.picker-calendar-week-days:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
right: auto;
top: auto;
height: 1px;
width: 100%;
background-color: #c4c4c4;
display: block;
z-index: 15;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.picker-calendar-week-days:after {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
.picker-calendar-week-days:after {
-webkit-transform: scaleY(0.33);
transform: scaleY(0.33);
}
}
.picker-calendar-week-days .picker-calendar-week-day {
-webkit-flex-shrink: 1;
-ms-flex: 0 1 auto;
-ms-flex-negative: 1;
flex-shrink: 1;
width: 14.28571429%;
width: calc(100% / 7);
line-height: 17px;
text-align: center;
}
.picker-calendar-week-days + .picker-calendar-months {
height: 11.9rem;
}
.picker-calendar-months {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.picker-calendar-months-wrapper {
position: relative;
width: 100%;
height: 100%;
-webkit-transition: 300ms;
transition: 300ms;
}
.picker-calendar-month {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.picker-calendar-row {
height: 16.66666667%;
height: calc(100% / 6);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-shrink: 1;
-ms-flex: 0 1 auto;
-ms-flex-negative: 1;
flex-shrink: 1;
width: 100%;
position: relative;
}
.picker-calendar-row:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
right: auto;
top: auto;
height: 1px;
width: 100%;
background-color: #ccc;
display: block;
z-index: 15;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.picker-calendar-row:after {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
.picker-calendar-row:after {
-webkit-transform: scaleY(0.33);
transform: scaleY(0.33);
}
}
.weui-picker-modal .picker-calendar-row:last-child:after {
display: none;
}
.picker-calendar-day {
-webkit-flex-shrink: 1;
-ms-flex: 0 1 auto;
-ms-flex-negative: 1;
flex-shrink: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
box-sizing: border-box;
width: 14.28571429%;
width: calc(100% / 7);
text-align: center;
color: #3d4145;
font-size: 15px;
cursor: pointer;
}
.picker-calendar-day.picker-calendar-day-prev,
.picker-calendar-day.picker-calendar-day-next {
color: #ccc;
}
.picker-calendar-day.picker-calendar-day-disabled {
color: #d4d4d4;
cursor: auto;
}
.picker-calendar-day.picker-calendar-day-today span {
background: #e3e3e3;
}
.picker-calendar-day.picker-calendar-day-selected span {
background: #04BE02;
color: #fff;
}
.picker-calendar-day span {
display: inline-block;
border-radius: 100%;
width: 30px;
height: 30px;
line-height: 30px;
}
.picker-calendar-month-picker,
.picker-calendar-year-picker {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 50%;
max-width: 200px;
-webkit-flex-shrink: 10;
-ms-flex: 0 10 auto;
-ms-flex-negative: 10;
flex-shrink: 10;
}
.picker-calendar-month-picker a.icon-only,
.picker-calendar-year-picker a.icon-only {
min-width: 36px;
}
.picker-calendar-month-picker span,
.picker-calendar-year-picker span {
-webkit-flex-shrink: 1;
-ms-flex: 0 1 auto;
-ms-flex-negative: 1;
flex-shrink: 1;
position: relative;
overflow: hidden;
text-overflow: ellipsis;
}
.popover .picker-calendar .picker-calendar-week-days,
.picker-calendar.picker-modal-inline .picker-calendar-week-days {
background: none;
}
.popover .picker-calendar .toolbar:before,
.picker-calendar.picker-modal-inline .toolbar:before,
.popover .picker-calendar .picker-calendar-week-days:before,
.picker-calendar.picker-modal-inline .picker-calendar-week-days:before {
display: none;
}
.popover .picker-calendar .toolbar:after,
.picker-calendar.picker-modal-inline .toolbar:after,
.popover .picker-calendar .picker-calendar-week-days:after,
.picker-calendar.picker-modal-inline .picker-calendar-week-days:after {
display: none;
}
.popover .picker-calendar .toolbar ~ .picker-modal-inner .picker-calendar-months:before,
.picker-calendar.picker-modal-inline .toolbar ~ .picker-modal-inner .picker-calendar-months:before,
.popover .picker-calendar .picker-calendar-week-days ~ .picker-calendar-months:before,
.picker-calendar.picker-modal-inline .picker-calendar-week-days ~ .picker-calendar-months:before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: auto;
right: auto;
height: 1px;
width: 100%;
background-color: #c4c4c4;
display: block;
z-index: 15;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.popover .picker-calendar .toolbar ~ .picker-modal-inner .picker-calendar-months:before,
.picker-calendar.picker-modal-inline .toolbar ~ .picker-modal-inner .picker-calendar-months:before,
.popover .picker-calendar .picker-calendar-week-days ~ .picker-calendar-months:before,
.picker-calendar.picker-modal-inline .picker-calendar-week-days ~ .picker-calendar-months:before {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
.popover .picker-calendar .toolbar ~ .picker-modal-inner .picker-calendar-months:before,
.picker-calendar.picker-modal-inline .toolbar ~ .picker-modal-inner .picker-calendar-months:before,
.popover .picker-calendar .picker-calendar-week-days ~ .picker-calendar-months:before,
.picker-calendar.picker-modal-inline .picker-calendar-week-days ~ .picker-calendar-months:before {
-webkit-transform: scaleY(0.33);
transform: scaleY(0.33);
}
}
.picker-calendar-month-picker,
.picker-calendar-year-picker {
display: block;
line-height: 2.2rem;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.picker-calendar-month-picker a.icon-only,
.picker-calendar-year-picker a.icon-only {
float: left;
width: 25%;
height: 2.2rem;
line-height: 2rem;
}
.picker-calendar-month-picker .current-month-value,
.picker-calendar-year-picker .current-month-value,
.picker-calendar-month-picker .current-year-value,
.picker-calendar-year-picker .current-year-value {
float: left;
width: 50%;
height: 2.2rem;
}
i.icon {
display: inline-block;
vertical-align: middle;
background-size: 100% auto;
background-position: center;
background-repeat: no-repeat;
font-style: normal;
position: relative;
}
i.icon.icon-next,
i.icon.icon-prev {
width: 0.75rem;
height: 0.75rem;
}
i.icon.icon-next {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2015%2015'%3E%3Cg%3E%3Cpath%20fill%3D'%2304BE02'%20d%3D'M1%2C1.6l11.8%2C5.8L1%2C13.4V1.6%20M0%2C0v15l15-7.6L0%2C0L0%2C0z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
i.icon.icon-prev {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2015%2015'%3E%3Cg%3E%3Cpath%20fill%3D'%2304BE02'%20d%3D'M14%2C1.6v11.8L2.2%2C7.6L14%2C1.6%20M15%2C0L0%2C7.6L15%2C15V0L15%2C0z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
/**
* Swiper 3.3.1
* Most modern mobile touch slider and framework with hardware accelerated transitions
*
* http://www.idangero.us/swiper/
*
* Copyright 2016, Vladimir Kharlampidi
* The iDangero.us
* http://www.idangero.us/
*
* Licensed under MIT
*
* Released on: February 7, 2016
*/
.swiper-container {
margin: 0 auto;
position: relative;
overflow: hidden;
/* Fix of Webkit flickering */
z-index: 1;
}
.swiper-container-no-flexbox .swiper-slide {
float: left;
}
.swiper-container-vertical > .swiper-wrapper {
-webkit-box-orient: vertical;
-ms-flex-direction: column;
flex-direction: column;
}
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
box-sizing: content-box;
}
.swiper-container-android .swiper-slide,
.swiper-wrapper {
-webkit-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
}
.swiper-container-multirow > .swiper-wrapper {
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.swiper-container-free-mode > .swiper-wrapper {
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
margin: 0 auto;
}
.swiper-slide {
-webkit-flex-shrink: 0;
-ms-flex: 0 0 auto;
-ms-flex-negative: 0;
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
}
/* Auto Height */
.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
height: auto;
}
.swiper-container-autoheight .swiper-wrapper {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-transition-property: -webkit-transform, height;
-webkit-transition-property: height, -webkit-transform;
transition-property: height, -webkit-transform;
transition-property: transform, height;
transition-property: transform, height, -webkit-transform;
}
/* a11y */
.swiper-container .swiper-notification {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
opacity: 0;
z-index: -1000;
}
/* IE10 Windows Phone 8 Fixes */
.swiper-wp8-horizontal {
-ms-touch-action: pan-y;
touch-action: pan-y;
}
.swiper-wp8-vertical {
-ms-touch-action: pan-x;
touch-action: pan-x;
}
/* Arrows */
.swiper-button-prev,
.swiper-button-next {
position: absolute;
top: 50%;
width: 27px;
height: 44px;
margin-top: -22px;
z-index: 10;
cursor: pointer;
background-size: 27px 44px;
background-position: center;
background-repeat: no-repeat;
}
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
opacity: 0.35;
cursor: auto;
pointer-events: none;
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
left: 10px;
right: auto;
}
.swiper-button-prev.swiper-button-black,
.swiper-container-rtl .swiper-button-next.swiper-button-black {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-prev.swiper-button-white,
.swiper-container-rtl .swiper-button-next.swiper-button-white {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
right: 10px;
left: auto;
}
.swiper-button-next.swiper-button-black,
.swiper-container-rtl .swiper-button-prev.swiper-button-black {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-next.swiper-button-white,
.swiper-container-rtl .swiper-button-prev.swiper-button-white {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}
/* Pagination Styles */
.swiper-pagination {
position: absolute;
text-align: center;
-webkit-transition: 300ms;
transition: 300ms;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden {
opacity: 0;
}
/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets {
bottom: 10px;
left: 0;
width: 100%;
}
/* Bullets */
.swiper-pagination-bullet {
width: 8px;
height: 8px;
display: inline-block;
border-radius: 100%;
background: #000;
opacity: 0.2;
}
button.swiper-pagination-bullet {
border: none;
margin: 0;
padding: 0;
box-shadow: none;
-moz-appearance: none;
-ms-appearance: none;
-webkit-appearance: none;
appearance: none;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
cursor: pointer;
}
.swiper-pagination-white .swiper-pagination-bullet {
background: #fff;
}
.swiper-pagination-bullet-active {
opacity: 1;
background: #04BE02;
}
.swiper-pagination-white .swiper-pagination-bullet-active {
background: #fff;
}
.swiper-pagination-black .swiper-pagination-bullet-active {
background: #000;
}
.swiper-container-vertical > .swiper-pagination-bullets {
right: 10px;
top: 50%;
-webkit-transform: translate3d(0px, -50%, 0);
transform: translate3d(0px, -50%, 0);
}
.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
margin: 5px 0;
display: block;
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 5px;
}
/* Progress */
.swiper-pagination-progress {
background: rgba(0, 0, 0, 0.25);
position: absolute;
}
.swiper-pagination-progress .swiper-pagination-progressbar {
background: #007aff;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transform-origin: left top;
transform-origin: left top;
}
.swiper-container-rtl .swiper-pagination-progress .swiper-pagination-progressbar {
-webkit-transform-origin: right top;
transform-origin: right top;
}
.swiper-container-horizontal > .swiper-pagination-progress {
width: 100%;
height: 4px;
left: 0;
top: 0;
}
.swiper-container-vertical > .swiper-pagination-progress {
width: 4px;
height: 100%;
left: 0;
top: 0;
}
.swiper-pagination-progress.swiper-pagination-white {
background: rgba(255, 255, 255, 0.5);
}
.swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar {
background: #fff;
}
.swiper-pagination-progress.swiper-pagination-black .swiper-pagination-progressbar {
background: #000;
}
/* 3D Container */
.swiper-container-3d {
-webkit-perspective: 1200px;
-o-perspective: 1200px;
perspective: 1200px;
}
.swiper-container-3d .swiper-wrapper,
.swiper-container-3d .swiper-slide,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-cube-shadow {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10;
}
.swiper-container-3d .swiper-slide-shadow-left {
background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
/* Safari 4+, Chrome */
background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Chrome 10+, Safari 5.1+, iOS 5+ */
/* Firefox 3.6-15 */
/* Opera 11.10-12.00 */
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Firefox 16+, IE10, Opera 12.50+ */
}
.swiper-container-3d .swiper-slide-shadow-right {
background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
/* Safari 4+, Chrome */
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Chrome 10+, Safari 5.1+, iOS 5+ */
/* Firefox 3.6-15 */
/* Opera 11.10-12.00 */
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Firefox 16+, IE10, Opera 12.50+ */
}
.swiper-container-3d .swiper-slide-shadow-top {
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
/* Safari 4+, Chrome */
background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Chrome 10+, Safari 5.1+, iOS 5+ */
/* Firefox 3.6-15 */
/* Opera 11.10-12.00 */
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Firefox 16+, IE10, Opera 12.50+ */
}
.swiper-container-3d .swiper-slide-shadow-bottom {
background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
/* Safari 4+, Chrome */
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Chrome 10+, Safari 5.1+, iOS 5+ */
/* Firefox 3.6-15 */
/* Opera 11.10-12.00 */
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Firefox 16+, IE10, Opera 12.50+ */
}
/* Coverflow */
.swiper-container-coverflow .swiper-wrapper,
.swiper-container-flip .swiper-wrapper {
/* Windows 8 IE 10 fix */
-ms-perspective: 1200px;
}
/* Cube + Flip */
.swiper-container-cube,
.swiper-container-flip {
overflow: visible;
}
.swiper-container-cube .swiper-slide,
.swiper-container-flip .swiper-slide {
pointer-events: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 1;
}
.swiper-container-cube .swiper-slide .swiper-slide,
.swiper-container-flip .swiper-slide .swiper-slide {
pointer-events: none;
}
.swiper-container-cube .swiper-slide-active,
.swiper-container-flip .swiper-slide-active,
.swiper-container-cube .swiper-slide-active .swiper-slide-active,
.swiper-container-flip .swiper-slide-active .swiper-slide-active {
pointer-events: auto;
}
.swiper-container-cube .swiper-slide-shadow-top,
.swiper-container-flip .swiper-slide-shadow-top,
.swiper-container-cube .swiper-slide-shadow-bottom,
.swiper-container-flip .swiper-slide-shadow-bottom,
.swiper-container-cube .swiper-slide-shadow-left,
.swiper-container-flip .swiper-slide-shadow-left,
.swiper-container-cube .swiper-slide-shadow-right,
.swiper-container-flip .swiper-slide-shadow-right {
z-index: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
/* Cube */
.swiper-container-cube .swiper-slide {
visibility: hidden;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
width: 100%;
height: 100%;
}
.swiper-container-cube.swiper-container-rtl .swiper-slide {
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-next,
.swiper-container-cube .swiper-slide-prev,
.swiper-container-cube .swiper-slide-next + .swiper-slide {
pointer-events: auto;
visibility: visible;
}
.swiper-container-cube .swiper-cube-shadow {
position: absolute;
left: 0;
bottom: 0px;
width: 100%;
height: 100%;
background: #000;
opacity: 0.6;
-webkit-filter: blur(50px);
filter: blur(50px);
z-index: 0;
}
/* Fade */
.swiper-container-fade.swiper-container-free-mode .swiper-slide {
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.swiper-container-fade .swiper-slide {
pointer-events: none;
-webkit-transition-property: opacity;
transition-property: opacity;
}
.swiper-container-fade .swiper-slide .swiper-slide {
pointer-events: none;
}
.swiper-container-fade .swiper-slide-active,
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
pointer-events: auto;
}
/* Scrollbar */
.swiper-scrollbar {
border-radius: 10px;
position: relative;
-ms-touch-action: none;
background: rgba(0, 0, 0, 0.1);
}
.swiper-container-horizontal > .swiper-scrollbar {
position: absolute;
left: 1%;
bottom: 3px;
z-index: 50;
height: 5px;
width: 98%;
}
.swiper-container-vertical > .swiper-scrollbar {
position: absolute;
right: 3px;
top: 1%;
z-index: 50;
width: 5px;
height: 98%;
}
.swiper-scrollbar-drag {
height: 100%;
width: 100%;
position: relative;
background: rgba(0, 0, 0, 0.5);
border-radius: 10px;
left: 0;
top: 0;
}
.swiper-scrollbar-cursor-drag {
cursor: move;
}
/* Preloader */
.swiper-lazy-preloader {
width: 42px;
height: 42px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -21px;
margin-top: -21px;
z-index: 10;
-webkit-transform-origin: 50%;
transform-origin: 50%;
-webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
animation: swiper-preloader-spin 1s steps(12, end) infinite;
}
.swiper-lazy-preloader:after {
display: block;
content: "";
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
background-position: 50%;
background-size: 100%;
background-repeat: no-repeat;
}
.swiper-lazy-preloader-white:after {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
@-webkit-keyframes swiper-preloader-spin {
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes swiper-preloader-spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.weui-actionsheet {
z-index: 10000;
}
.weui-popup__overlay,
.weui-popup__container {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 0;
width: 100%;
height: 100%;
z-index: 10;
}
.weui-popup__overlay {
background-color: rgba(0, 0, 0, 0.6);
opacity: 0;
-webkit-transition: opacity .3s;
transition: opacity .3s;
}
.weui-popup__container {
display: none;
}
.weui-popup__container.weui-popup__container--visible {
display: block;
}
.weui-popup__container .weui-cells {
margin: 0;
text-align: left;
}
.weui-popup__modal {
width: 100%;
position: absolute;
z-index: 100;
bottom: 0;
border-radius: 0;
opacity: 0.6;
color: #3d4145;
-webkit-transition-duration: .3s;
transition-duration: .3s;
height: 100%;
background: #EFEFF4;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
-webkit-transition-property: opacity, -webkit-transform;
transition-property: opacity, -webkit-transform;
transition-property: transform, opacity;
transition-property: transform, opacity, -webkit-transform;
overflow-x: hidden;
overflow-y: auto;
}
.popup-bottom .weui-popup__modal {
height: auto;
}
.weui-popup__modal .toolbar {
position: absolute;
left: 0;
top: 0;
right: 0;
z-index: 1;
}
.weui-popup__modal .modal-content {
height: 100%;
padding-top: 2.2rem;
overflow: auto;
box-sizing: border-box;
}
.weui-popup__container--visible .weui-popup__overlay {
opacity: 1;
}
.weui-popup__container--visible .weui-popup__modal {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.weui-notification {
position: fixed;
width: 100%;
min-height: 3.4rem;
top: -2rem;
padding-top: 2rem;
left: 0;
right: 0;
z-index: 9999;
background-color: rgba(0, 0, 0, 0.85);
color: white;
font-size: .65rem;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
-webkit-transition: .4s;
transition: .4s;
}
.weui-notification.weui-notification--in {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.weui-notification.weui-notification--touching {
-webkit-transition-duration: 0s;
transition-duration: 0s;
}
.weui-notification .weui-notification__inner {
padding: .4rem .6rem 1rem .6rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.weui-notification .weui-notification__content {
width: 100%;
margin: 0rem .4rem;
}
.weui-notification .weui-notification__title {
font-weight: bold;
}
.weui-notification .weui-notification__text {
line-height: 1;
}
.weui-notification .weui-notification__media {
height: 1rem;
width: 1rem;
}
.weui-notification .weui-notification__media img {
width: 100%;
}
.weui-notification .weui-notification__handle-bar {
position: absolute;
bottom: .2rem;
left: 50%;
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
width: 2rem;
height: .3rem;
border-radius: .15rem;
background: white;
opacity: .5;
}
.weui-photo-browser-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: black;
display: none;
opacity: 0;
-webkit-transition: opacity .3s;
transition: opacity .3s;
}
.weui-photo-browser-modal.weui-photo-browser-modal-visible {
opacity: 1;
}
.weui-photo-browser-modal .swiper-container {
height: 100%;
-webkit-transform: scale(0.2);
transform: scale(0.2);
-webkit-transition: -webkit-transform .5s;
transition: -webkit-transform .5s;
transition: transform .5s;
transition: transform .5s, -webkit-transform .5s;
}
.weui-photo-browser-modal .swiper-container .swiper-pagination-bullet {
background: white;
visibility: hidden;
}
.weui-photo-browser-modal .swiper-container.swiper-container-visible {
-webkit-transform: scale(1);
transform: scale(1);
}
.weui-photo-browser-modal .swiper-container.swiper-container-visible .swiper-pagination-bullet {
visibility: visible;
-webkit-transition-property: visibility;
transition-property: visibility;
-webkit-transition-delay: .5s;
transition-delay: .5s;
}
.weui-photo-browser-modal .swiper-container .swiper-pagination {
bottom: 10px;
left: 0;
width: 100%;
}
.weui-photo-browser-modal .photo-container {
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
overflow: hidden;
}
.weui-photo-browser-modal .photo-container img {
max-width: 100%;
margin-top: -30px;
}
.weui-photo-browser-modal .caption {
position: absolute;
bottom: 40px;
left: 0;
right: 0;
color: white;
text-align: center;
padding: 0 12px;
min-height: 3rem;
font-size: 14px;
z-index: 10;
-webkit-transition: opacity .3s;
transition: opacity .3s;
-webkit-transition-delay: .5s;
transition-delay: .5s;
opacity: 0;
}
.weui-photo-browser-modal .caption .caption-item {
display: none;
opacity: 0;
-webkit-transition: opacity .15s;
transition: opacity .15s;
}
.weui-photo-browser-modal .caption .caption-item.active {
display: block;
opacity: 1;
}
.weui-photo-browser-modal .swiper-container-visible .caption {
opacity: 1;
}
.color-primary {
color: #04BE02;
}
.color-danger,
.color-error {
color: #f6383a;
}
.color-warning {
color: #f60;
}
.color-success {
color: #4cd964;
}
.bg-primary,
.bg-success,
.bg-danger,
.bg-error,
.bg-warning {
color: white;
}
.bg-primary {
background-color: #04BE02;
}
.bg-danger,
.bg-error {
background-color: #f6383a;
}
.bg-warning {
background-color: #f60;
}
.bg-success {
background-color: #4cd964;
}
.weui-toptips {
z-index: 100;
opacity: 0;
-webkit-transition: opacity .3s;
transition: opacity .3s;
}
.weui-toptips.weui-toptips_visible {
opacity: 1;
}
.weui-icon_toast {
font-size: 55px;
color: white;
margin-bottom: 6px;
}
.weui-toast--forbidden .weui-icon_toast {
color: #f6383a;
}
.weui-toast--text {
min-height: initial;
font-size: 18px;
padding: 8px 16px;
width: auto;
top: 40%;
}
.weui-toast--text .weui-icon_toast {
display: none;
}
.weui-count {
display: inline-block;
height: 25px;
line-height: 25px;
}
.weui-count .weui-count__btn {
height: 21px;
width: 21px;
line-height: 21px;
display: inline-block;
position: relative;
border: 1px solid #04BE02;
border-radius: 50%;
vertical-align: -6px;
}
.weui-count .weui-count__btn:after,
.weui-count .weui-count__btn:before {
content: " ";
position: absolute;
height: 1px;
width: 11px;
background-color: #04BE02;
left: 50%;
top: 50%;
margin-left: -5.5px;
}
.weui-count .weui-count__btn:after {
height: 11px;
width: 1px;
margin-top: -5.5px;
margin-left: -1px;
}
.weui-count .weui-count__decrease:after {
display: none;
}
.weui-count .weui-count__increase {
background-color: #04BE02;
}
.weui-count .weui-count__increase:after,
.weui-count .weui-count__increase:before {
background-color: white;
}
.weui-count .weui-count__number {
background-color: transparent;
font-size: .8rem;
border: 0;
width: 1.3rem;
text-align: center;
color: #5f646e;
}
.weui-panel .weui-media-box__title-after {
color: #9b9b9b;
font-size: .65rem;
float: right;
}
... ...
.container{
position: relative;
font-family:PingFangSC-Regular;
padding: 0.56rem 0.4rem 0;
}
.evaluate_textbox{
position: relative;
border-bottom: 1px solid #E4E4E4;
}
.evaluate_textbox textarea{
width: 100%;
height: 4.1rem;
border: none;
resize: none;
font-size: 0.28rem;
padding-top: 10px;
color:#999999;
}
.limit{
font-size: 0.26rem;
color: #999999;
position: absolute;
right: 0.4rem;
bottom: 0.36rem;
}
.limit_text{
font-size: 0.26rem;
color: #999999;
margin-top: 0.36rem;
}
/*图片列表*/
.evaluate_pic_list{
display: flex;
margin-top: 0.43rem;
}
.evaluate_pic_item img{
width: 100%;
height: 100%;
}
.evaluate_pic_item .icon{
content: '';
display: block;
width: 0.32rem;
height: 0.32rem;
position: absolute;
right: 0rem;
top: -0.74rem;
}
.evaluate_pic_item{
margin-right: 0.5rem;
height: 1.8rem;
width: 1.7rem;
position: relative;
z-index: 1;
}
.evaluate_pic_item:last-child{
margin-right: 0;
}
.evaluate_pic_itembox{
width: 1.8rem;
height: 1.8rem;
border: 1px dotted #CCCCCC;
background: url(../../img/3@2x.png) top no-repeat;
background-position:0.66rem 0.5rem;
background-size: 0.56rem 0.49rem;
text-align: center;
}
.evaluate_pic_itembox p{
font-size: 0.24rem;
color: #999999;
margin-top: 1.1rem;
margin-left: 0.05rem;
}
/*footer*/
.footer{
font-size: 0.3rem;
color: #333333;
display: block;
width: 2rem;
height: 0.72rem;
background-color: #FFCC00;
margin: 0 auto;
line-height: 0.72rem;
text-align: center;
border-radius: 0.36rem;
margin-top: 1.12rem;
}
... ...