Commit 3b6dffa1b80cfe0c591d0d8c5bd18fc177df8aea

Authored by vking
1 parent 938e65a9

new 2.0

... ... @@ -28,7 +28,7 @@ page {
--black: #333333;
--darkGray: #666666;
--gray: #999999;
--ghostWhite: #f1f1f1;
--ghostWhite: #f2f2f2;
--white: #ffffff;
/* 浅色 */
--redLight: #fadbd9;
... ... @@ -2472,7 +2472,7 @@ button.icon.lg {
right: 0;
bottom: 0;
left: 0;
z-index: 1110;
z-index: 10000;
opacity: 0;
outline: 0;
text-align: center;
... ...
// components/showModal/showModal.js
import util from '../../../utils/util'
const properties = {
cancelText: {type: String, value: ''},
cancelColor: {type: String, value: '#000'},
confirmText: {type: String, value: '确认'},
confirmColor: {type: String, value: '#fff'},
header: {type: String, value: '确认信息'},
body: {type: String, value: '确认信息'},
cla: String,
};
Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
/**
* 组件的属性列表
*/
properties: properties,
/**
* 组件的初始数据
*/
data: {
hasShow: false,
},
attached() {
let opt = {};
Object.keys(properties).forEach((k) => {
opt[k] = this.data[k]
})
this.setData({
opt: opt
})
},
/**
* 组件的方法列表
*/
methods: {
options(obj) {
let opt = this.data.opt;
this.setData({
opt: {
...opt,
...obj
}
})
return this;
},
show() {
console.log(this.data.opt)
this.setData({
hasShow: true,
})
},
tapButton(e) {
if(util.attr(e, 'type')=='confirm'){
this.triggerEvent('event', {type: util.attr(e, 'type')})
}
this.hide();
},
hide() {
this.setData({
hasShow: false,
})
}
}
})
... ...
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
... ...
<!--components/showModal/showModal.wxml-->
<view class="cu-modal bottom-modal {{hasShow?'show':''}}" bindtap="hide">
<view class="cu-dialog confirm bg-white" catchtap="catchtap">
<view class="view padding-lg">
{{opt.header}}
</view>
<view class="view margin-bottom-xl">
{{opt.body}}
</view>
<view class="flex justify-center margin-bottom-lg margin-top">
<button class="view cu-btn margin-right-xl round bg-ghostWhite" wx:if="{{opt.cancelText}}"
bindtap="tapButton" data-type="cancel"
style="color:{{opt.cancelColor}};">{{opt.cancelText}}</button>
<button class="view cu-btn round bg-blue"
bindtap="tapButton" data-type="confirm"
style="color:{{opt.confirmColor}};">{{opt.confirmText}}</button>
</view>
</view>
</view>
<!--
<view class="mask flex-vc {{cla}}" hidden="{{!hasShow}}">
<view class="showModal">
<view class="header">
{{opt.header}}
</view>
<view class="body">
{{opt.body}}
<slot name="body"></slot>
</view>
<view class="footer flex-cc">
<button class="button-none cancel" plain wx:if="{{opt.cancelText}}"
bindtap="tapButton" data-type="cancel"
style="color:{{opt.cancelColor}};">{{opt.cancelText}}</button>
<button class="button-none confirm bg-brown" plain
bindtap="tapButton" data-type="confirm"
style="color:{{opt.confirmColor}};">{{opt.confirmText}}</button>
</view>
</view>
</view>
-->
... ...
/* components/showModal/showModal.wxss */
@import "../../../colorui/main.wxss";
.confirm{
border-radius: 40rpx 40rpx 0rpx 0rpx !important;
}
.bg-ghostWhite{
background-color: var(--ghostWhite);
}
\ No newline at end of file
... ...
... ... @@ -31,6 +31,10 @@ Component({
*/
methods: {
getPos(fouce=false){
this.selectComponent('#confirm').options({
header: '定位失败',
body: '请开启定位,为您查询附近餐厅。'
}).show();
this._getPos().then(res => {
console.log('wx.getLocation.then', res);
failCount=0;
... ... @@ -76,9 +80,9 @@ Component({
if(this.data.hasAllowLoading) wx.hideLoading()
return;
}
this.selectComponent('#showModal').options({
this.selectComponent('#confirm').options({
header: '定位失败',
body: '需要地理位置授权'
body: '请开启定位,为您查询附近餐厅。'
}).show();
} else {
failCount=failCount+1;
... ... @@ -127,7 +131,7 @@ Component({
},2000)
})
},
showModal(e){
confirmEvent(e){
wx.openSetting()
},
}
... ...
{
"component": true,
"usingComponents": {
"showModal":"/components/showModal/showModal"
"confirm":"/components/2.0/dialog/confirm"
}
}
\ No newline at end of file
... ...
<!--components/userinfo/getpos.wxml-->
<showModal id="showModal" confirmText="去授权" bindshowModal="showModal"></showModal>
<confirm id="confirm"
confirmText="去开启"
confirmColor="#FFFFFF"
cancelText="再想想"
cancelColor="#42A5FF"
bindevent="confirmEvent"></confirm>
... ...
... ... @@ -2,7 +2,6 @@
@import "../colorui/main.wxss";
.tabBar{
position: fixed;
z-index: 9;
bottom: 34rpx;
left: calc(50% - 232rpx);
width: 464rpx;
... ...
... ... @@ -4,8 +4,14 @@ import App from '../../utils/api';
import DA from './data';
import PubSub from '../../utils/PubSub'
const {regeneratorRuntime} = global
const mapScale = 15//18;
const def_latitude = 39.684670;
const def_longitude = 118.176300;
Page({
data:{},
data:{
map:{},
},
user:{},
/**
* 生命周期函数--监听页面加载
*/
... ... @@ -17,7 +23,7 @@ Page({
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
this.selectComponent('#getpos').getPos();
},
/**
... ... @@ -25,6 +31,7 @@ Page({
*/
onShow: function () {
PubSub.emit('custom-tab-bar')
},
/**
... ... @@ -40,6 +47,33 @@ Page({
onUnload: function () {
},
onpos(e) {
let res = e.detail;
console.log('onpos.res', res);
let map = this.data.map;
if (!res.latitude){
map.latitude = def_latitude;
map.longitude = def_longitude;
}else{
map.latitude = res.latitude;
map.longitude = res.longitude;
}
map.scale = mapScale;
this.user.latitude = res.latitude;
this.user.longitude = res.longitude;
let sdobj = {
map: map,
}
this.setData(sdobj)
},
moveToLocation() {
console.log('moveToLocation')
if (!this.user.latitude) {
console.log('moveToLocation')
this.selectComponent('#getpos').getPos(true);
return;
}
},
back:function() {
/*
var mta = require('mta-wechat-analysis')
... ...
<!--pages/reservr/index.wxml-->
<view class="pages">
<view class="flex-vc map">
<map id="map" scale="{{map.scale}}"
longitude="{{map.longitude}}" latitude="{{map.latitude}}"
markers="{{markers}}" polygons="{{polygons}}"
bindmarkertap="markertap"
bindcallouttap="markertap"
bindregionchange="regionchange"
bindupdated="mapUpdated"
show-location="{{false}}"
enable-3D="{{false}}"
enable-zoom
enable-scroll
enable-rotate
subkey="SDEBZ-I74W4-QLGUX-XXYXU-HIR23-3QFBJ"
layer-style="2"
style="width: 100%; height: {{map.height}}px;"></map>
</view>
<movable-area class="seller-view">
<movable-view direction="vertical" out-of-bounds
bindchange="movableChange"
class="movable-view">
<navigator url="./search"
bindtap="elog" data-ename="点击搜索框" hover-class="navigator-hover">
<view class="flex-ll transverse-view-search">
<view class="searchAddr flex-ll">
<image class="icon" src="http://nosqn.colorcun.com/custom/lite-online/image/search26.png"></image>
<view class="title">{{hasSuggestion?suggestion.title:'搜索餐厅/位置'}}</view>
<view class="clean" catchtap="moveToLocation" wx:if="{{hasSuggestion}}"></view>
</view>
<view class="searchList flex-tb" catchtap="listShow">
<image class="icon" src="http://nosqn.colorcun.com/mapmenu/maplist.png"></image>
<view class="title">列表模式</view>
</view>
</view>
</navigator>
<view class="transverse-search">
<view
bindtap="caixiShow"
class="tags {{multiIndex[0]>0?'active':''}}"
>
<view class="picker flex-lr">
<view class="input">
<block wx:if="{{multiIndex[0]==0}}">菜系</block>
<block wx:else="">{{multiArray[0][multiIndex[0]]}}</block>
</view>
<view class="more"></view>
</view>
</view>
<block wx:for="{{tags}}" wx:key="tagskey">
<view class="tags {{item.active?'active':''}}"
bindtap="tagsChange"
data-id="{{item.id}}">{{item.name}}</view>
</block>
<view
bindtap="filterShow"
class="tags {{filterParams.consumeStr?'active':''}}"
>
<view class="picker flex-lr">
<view class="input">
{{filterParams.consumeStr?filterParams.consumeStr:'筛选'}}
</view>
<view class="more"></view>
</view>
</view>
<!--
<view class="fingSeller flex-ll" bindtap="findSeller">
<view class="icon"></view>
<view>查找餐厅</view>
</view>
-->
</view>
<view class="transverse-list" wx:if="{{hasGetSellersEnd}}">
<swiper wx:if="{{hasSellers || listMoreCount>0}}"
indicator-dots="{{false}}" autoplay="{{false}}" circular="{{false}}" vertical="{{false}}"
interval="2000" duration="500"
previous-margin="{{15}}px" next-margin="{{15}}px" style="height: 350rpx;"
current="{{current}}" bindchange="bindtransition">
<block wx:for="{{markers}}" wx:key="markerskey" wx:if="{{item.id!='location' && item.id!='locationMe'}}">
<swiper-item bindtap="gotoDetail"
data-sid="{{item.id}}" wx:if="{{item.display!='none'}}">
<view class="seller" id="seller-{{item.id}}">
<sb-tr seller="{{item.seller}}"
hasInSwiper bindevent="sbtrEvent"
hasActivityTags="{{false}}"
hasActivityShort="{{true}}"
hasBrand="true" hasActivityRed="true"
hasSuggestion="{{hasSuggestion}}" hasShafa
hasSlogan="{{false}}"></sb-tr>
</view>
</swiper-item>
</block>
<swiper-item bindtap="gotoDetail2">
<view class="seller seller-last" id="seller-last">
<view class="empty">
<view class="info">
<view class="info-msg Semibold">缩放地图发现更多餐厅</view>
<view class="info-txt">往任意方向拖动地图,可搜索不同范围</view>
</view>
<view class="icon"></view>
</view>
</view>
</swiper-item>
</swiper>
<view class="empty-txt flex-vc" wx:else="">
<view class="seller">
<view class="empty">
<view class="info" wx:if="{{listMoreCount>0}}" bindtap="listShow">
<view class="info-msg Semibold" style="margin-top: 58rpx;">已扩大范围为你找到餐厅</view>
<view class="info-txt">当前范围没有找到符合条件的餐厅</view>
<view class="info-button flex-lr" style="display: flex;margin-top: 50rpx;margin-left: 0;">
<view>去挑选</view>
<view class="info-button-gt"></view>
</view>
</view>
<view class="info" wx:elif="{{hasSearchLimit}}">
<view class="info-msg Semibold" style="margin-top: 58rpx;">未找到符合要求的餐厅</view>
<view class="info-txt">修改或减少条件,获取更多餐厅</view>
<button class="button-none flex-lr info-button"
style="display: flex;margin-top: 50rpx;margin-left: 0;"
open-type="contact">
<view>人工帮订</view>
<view class="info-button-gt"></view>
</button>
</view>
<view class="info" wx:else="" bindtap="setTSLocal">
<view class="info-msg Semibold">你可以切换到其他城市看看</view>
<view class="info-button full flex-lr">
<view>唐山市</view>
<view class="info-button-gt"></view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="transverse-list" wx:else="">
<swiper
indicator-dots="{{false}}" autoplay="{{false}}" circular="{{false}}" vertical="{{false}}"
interval="2000" duration="500"
previous-margin="{{15}}px" next-margin="{{15}}px" style="height: 350rpx;"
current="{{current}}" bindchange="bindtransition">
<swiper-item bindtap="gotoDetail2" >
<view class="seller seller-last" id="seller-last">
<view class="empty">
<view class="info">
<view class="info-msg Semibold">缩放地图发现更多餐厅</view>
<view class="info-txt">往任意方向拖动地图,可搜索不同范围</view>
</view>
<view class="icon"></view>
</view>
</view>
</swiper-item>
</swiper>
</view>
</movable-view>
</movable-area>
<map id="map" scale="{{map.scale}}"
longitude="{{map.longitude}}" latitude="{{map.latitude}}"
markers="{{markers}}" polygons="{{polygons}}"
bindmarkertap="markertap"
bindcallouttap="markertap"
bindregionchange="regionchange"
bindupdated="mapUpdated"
show-location="{{false}}"
enable-3D="{{false}}"
enable-zoom
enable-scroll
enable-rotate
subkey="SDEBZ-I74W4-QLGUX-XXYXU-HIR23-3QFBJ"
layer-style="2"
style="width: 100%; height: 360rpx;"></map>
<view class="view">
</view>
<view bindtap="moveToLocation" class="moveToLocation">
<image src="http://nosqn.colorcun.com/reserve/images/golocal.png"></image>
<getpos bindpos="onpos" id="getpos"></getpos>
<view bindtap="moveToLocation" class="view moveToLocation flex align-center justify-center">
<image class="moveToLocation-image" src="http://nosqn.colorcun.com/2.0/home%20%2811%29.png"></image>
</view>
<!--
<view class="toast" wx:if="{{hasGetSellersEnd && listMoreCount<1 && !hasSearchLimit}}">该地区没有可供预订的餐厅哦!努力开通中</view>
<view class="toast" wx:if="{{hasGetSellersEnd && markers.length<3 && listMoreCount>0}}">移动或缩放地图,获取更多餐厅</view>
<getpos bindpos="onpos" id="getpos"></getpos>
<seller-box id="seller-box" bindevent="sellerBoxEvent"></seller-box>
<cover-view class="tab-patch"></cover-view>
<a2l bindshow="a2lshow" bindhide="a2lshow" key="INDEX"></a2l>
... ... @@ -173,4 +36,5 @@
<boost bindevent="boostEvent" wx:if="{{hasBoost}}"></boost>
<activity-tips wx:if="{{hasSetActivity}}" map="{{map}}"></activity-tips>
<as-phone id="as"></as-phone>
<filter id="filter" bindevent="filterEvent"></filter>
\ No newline at end of file
<filter id="filter" bindevent="filterEvent"></filter>
-->
\ No newline at end of file
... ...
/* pages/reservr/index.wxss */
@import "/colorui/main.wxss";
page{
background-color: #efefef;
--barHeight: calc(98rpx + env(safe-area-inset-bottom));
}
.pages{
width: 100%;
margin: 0 0 0;
color:#353535;
}
.map{
}
.tab-patch{
position: fixed;
background-color: #fefefe;
height: 20rpx;
width: 100%;
bottom: -120rpx;
}
.moveToLocation{
position: fixed;
bottom: calc(520rpx + var(--barHeight));
right: 20rpx;
width: 62rpx;
height: 62rpx;
}
.moveToLocation image{
width: 62rpx;
height: 62rpx;
}
.transverse-view{
position: relative;
height: 464rpx;
width: 100%;
background-color: #fefefe;
overflow: hidden;
}
.transverse-list{
background-color: #fefefe;
/*height: 264rpx;*/
width: 100%;
margin-top: -360rpx;
}
.transverse-list .seller{
width: 98%;
margin: 0 auto;
width: 80rpx;
height: 80rpx;
right:0rpx;
top:280rpx;
}
.transverse-list .seller .empty{
height: 300rpx;
overflow: hidden;
color: #353535;
width: 86%;
border: 2rpx solid #E0E0E0;
border-left: 6rpx solid #F05522;
border-radius: 6rpx;
box-shadow: 0 4rpx 8rpx 0 #E0E0E0;
position: relative;
}
.transverse-list .seller-last .empty{
width: 99%;
}
.seller .empty .info{
height: 124rpx;
font-size: 28rpx;
margin-left: 34rpx;
margin-top: 88rpx;
}
.seller .empty .info .info-msg{
font-size: 32rpx;
color:#F05522;
margin-bottom: 40rpx;
height: 44rpx;
line-height: 44rpx;
}
.info-txt{
line-height: 40rpx;
.moveToLocation-image{
width: 40rpx;
height: 40rpx;
}
.seller .empty .icon{
background-image: url("http://nosqn.colorcun.com/reserve/images/hasClick.png");
background-size: 100% 100%;
width: 54rpx;
height: 56rpx;
position: absolute;
top:82rpx;
right:40rpx;
}
.seller-last .empty .icon{
background-image: url("http://nosqn.colorcun.com/reserve/images/%E7%BC%A9%E6%94%BE.png");
background-size: 100% 100%;
width: 98rpx;
height: 76rpx;
position: absolute;
top:40rpx;
right:68rpx;
}
.picker{
height: 50rpx;
line-height: 50rpx;
padding-left: 8rpx;
padding-right: 10rpx;
}
.picker .input{
height: 50rpx;
line-height: 50rpx;
margin-right: 10rpx;
}
.picker .more{
background-image: url("http://nosqn.colorcun.com/reserve/images/%E8%8F%9C%E7%B3%BB.png");
width: 12rpx;
height: 16rpx;
min-width:12rpx;
}
.disabled .tags{
color: #999;
}
.enabled .tags{
color: #353535;
}
.disabled .fingSeller{
color: #999;
}
.disabled .fingSeller .icon{
position: relative;
background: none;
}
.disabled .fingSeller .icon:after{
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url('http://nosqn.colorcun.com/reserve/images/find-black.png');
background-size: 100% 100%;
opacity: 0.5;
}
.enabled .fingSeller,.fingSeller{
height: 70rpx;
line-height: 70rpx;
width: 172rpx;
box-shadow:-12rpx 0 10rpx -8rpx rgba(178,177,177,0.5);
box-sizing: border-box;
padding-left: 28rpx;
font-weight:600;
color:rgba(240,85,34,1);
}
.enabled .fingSeller .icon,.fingSeller .icon{
width: 32rpx;
height: 30rpx;
margin-right: 6rpx;
background-image: url("http://nosqn.colorcun.com/reserve/images/find.png");
background-size: 100% 100%;
}
.enabled .fingSeller .icon:after{
opacity: 0;
background:none;
}
.tags.active .picker .more{
background-image: url("http://nosqn.colorcun.com/reserve/images/%E8%8F%9C%E7%B3%BB%E9%80%89%E4%B8%AD.png");
}
.disabled .picker .more{
background-image: url("http://nosqn.colorcun.com/custom/lite-yd/image/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20190925174046.png");
}
.enabled .picker .more{
background-image: url("http://nosqn.colorcun.com/reserve/images/%E8%8F%9C%E7%B3%BB%E9%80%89%E4%B8%AD.png");
}
.searchAddr {
margin-left: 15rpx;
width: 400rpx;
height: 64rpx;
background-color: #fefefe;
line-height: 64rpx;
font-weight:400;
color:rgba(153,153,153,1);
font-size: 28rpx;
border-radius:32rpx;
border:2rpx solid rgba(204,204,204,1);
width: 100%;
box-sizing: border-box;
}
.searchAddr .icon{
min-width: 22rpx;
width: 22rpx;
height: 22rpx;
margin: 0 10rpx 0 40rpx;
}
.searchAddr .title{
line-height: 60rpx;
height: 60rpx;
overflow: hidden;
width: 100%;
text-align: left;
}
.searchList{
margin-left: 30rpx;
width:72rpx;
min-width: 72rpx;
align-items: center;
}
.searchList .icon{
width:40rpx;
height:36rpx;
margin-bottom: 4rpx;
}
.searchList .title{
height:26rpx;
font-size:18rpx;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(192,163,105,1);
line-height:26rpx;
}
.empty-txt{
height: 300rpx;
line-height: 300rpx;
font-size: 34rpx;
}
.empty-txt .seller{
}
.empty-txt .seller .empty{
background-image: url("http://nosqn.colorcun.com/reserve/images/empty-seller.png");
background-size: 100% 100%;
border-left-width: 0;
margin: 0 auto;
width: 90%;
}
.empty-txt .seller .empty .info{
margin-top: 52rpx;
margin-left: 30rpx;
}
.empty-txt .seller .empty .info .info-msg{
margin-bottom: 14rpx;
font-size: 34rpx;
margin-top: 78rpx;
height: 48rpx;
line-height: 48rpx;
}
.empty-txt .seller .empty .info .info-txt{
font-size: 24rpx;
}
.info-button{
border: 2rpx solid #F05522;
border-radius: 28rpx;
height: 56rpx;
line-height: 56rpx;
padding: 0 20rpx;
color: #F05522;
font-size: 28rpx;
min-width: 146rpx;
max-width: 170rpx;
box-sizing: border-box;
}
.info-button-gt{
background-image: url("http://nosqn.colorcun.com/reserve/images/gt-cheng.png");
background-size: 100% 100%;
width: 10rpx;
height: 20rpx;
}
.info-button.full{
background-color: #F05522;
color:#fefefe;
}
.info-button.full .info-button-gt{
background-image: url("http://nosqn.colorcun.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20190925175650.png");
}
.transverse-search .tags{
height: 50rpx;
line-height: 50rpx;
background-color: #F0F0F9;
border-radius: 4rpx;
margin-right: 30rpx;
padding: 0 16rpx;
}
.transverse-search .tags:last-child{
margin-right: 0;
}
.transverse-search .tags.active{
background:linear-gradient(to bottom ,#F4DAB9,#E9BE94);
color:#8B5318;
font-weight: 900;
}
/* seller-view start*/
.seller-view{
position:fixed;
bottom: calc(0rpx + var(--barHeight));
width: 100%;
background-color: #fefefe;
border-radius: 20rpx 20rpx 0 0;
box-shadow: -4rpx 0 4rpx 2rpx #C5C1C1;
overflow: hidden;
padding: 30rpx 0 20rpx;
height: 506rpx;
box-sizing: border-box;
}
.seller-view.disabled{
height: 410rpx;
}
.transverse-view-top{
height: 58rpx;
overflow: hidden;
background-color:#FFFFFF;
border-radius: 20rpx 20rpx 0 0;
position: fixed;
width: 100%;
}
.transverse-view-top .line{
height: 6rpx;
width: 70rpx;
margin-top: 14rpx;
background-color: #E0E0E0;
}
.transverse-view-top .text{
height: 34rpx;
line-height: 34rpx;
font-size: 24rpx;
color: #999999;
margin-top: 6rpx;
}
.transverse-search{
background-color: #fefefe;
/*height: 90rpx;*/
height: 450rpx;
font-size: 24rpx;
padding-left: 16rpx;
line-height: 90rpx;
width: calc(100% - 16rpx);
overflow-x: auto;
white-space:nowrap;
}
.transverse-search view{
display: inline-block;
}
.disabled .transverse-search{
padding-top: 0;
}
.toast{
background-color: #000;
width: 534rpx;
position: fixed;
bottom:calc(520rpx + var(--barHeight));
color: #fefefe;
height:60rpx;
font-size:26rpx;
line-height:60rpx;
left: calc(50% - 267rpx);
text-align: center;
border-radius:30rpx;
opacity:0.64;
}
.disabled .toast{
background-color: #000;
width: calc(100% - 72rpx);
position: fixed;
bottom:calc(430rpx + var(--barHeight));
color: #fefefe;
height:60rpx;
font-size:26rpx;
line-height:60rpx;
left: 36rpx;
text-align: center;
border-radius:30rpx;
opacity:0.64;
}
.transverse-view-search{
width:100%;
height:66rpx;
padding: 0 20rpx;
background:rgba(254,254,254,1);
box-sizing: border-box;
}
.movable-view{
width: 100%;
padding-top: 20rpx;
height: 426rpx;
}
.searchAddr .clean{
position: relative;
width: 100rpx;
height: 60rpx;
min-width: 100rpx;
}
.searchAddr .clean:after{
background-image: url("http://nosqn.colorcun.com/clean.png");
background-size: 100% 100%;
display: block;
content: "";
width:28rpx;
height:28rpx;
position: absolute;
top:16rpx;
left:32rpx;
}
\ No newline at end of file
... ...